| @@ -1,5 +1,6 @@ | ||
| 1 | 1 | (function() { |
| 2 | +"use strict"; | |
| 2 | 3 | var wp; |
| 3 | 4 | (wp ||= {}).theme = (() => { |
| 4 | 5 | var __create = Object.create; |
| 5 | 6 | var __defProp = Object.defineProperty; |
| @@ -3343,25 +3344,20 @@ | ||
| 3343 | 3344 | } |
| 3344 | 3345 | } |
| 3345 | 3346 | }); |
| 3346 | 3347 | |
| 3348 | + // packages/theme/node_modules/colorjs.io/src/equals.js | |
| 3349 | + function equals(color1, color2) { | |
| 3350 | + color1 = getColor(color1); | |
| 3351 | + color2 = getColor(color2); | |
| 3352 | + return color1.space === color2.space && color1.alpha === color2.alpha && color1.coords.every((c, i) => c === color2.coords[i]); | |
| 3353 | + } | |
| 3354 | + | |
| 3347 | 3355 | // packages/theme/node_modules/colorjs.io/src/luminance.js |
| 3348 | 3356 | function getLuminance(color) { |
| 3349 | 3357 | return get(color, [xyz_d65_default, "y"]); |
| 3350 | 3358 | } |
| 3351 | 3359 | |
| 3352 | - // packages/theme/node_modules/colorjs.io/src/contrast/WCAG21.js | |
| 3353 | - function contrastWCAG21(color1, color2) { | |
| 3354 | - color1 = getColor(color1); | |
| 3355 | - color2 = getColor(color2); | |
| 3356 | - let Y1 = Math.max(getLuminance(color1), 0); | |
| 3357 | - let Y2 = Math.max(getLuminance(color2), 0); | |
| 3358 | - if (Y2 > Y1) { | |
| 3359 | - [Y1, Y2] = [Y2, Y1]; | |
| 3360 | - } | |
| 3361 | - return (Y1 + 0.05) / (Y2 + 0.05); | |
| 3362 | - } | |
| 3363 | - | |
| 3364 | 3360 | // packages/theme/node_modules/colorjs.io/src/spaces/hsl.js |
| 3365 | 3361 | var hsl_default = new ColorSpace({ |
| 3366 | 3362 | id: "hsl", |
| 3367 | 3363 | name: "HSL", |
| @@ -3523,13 +3519,13 @@ | ||
| 3523 | 3519 | "background-interactive-neutral-weak", |
| 3524 | 3520 | "background-interactive-neutral-weak-disabled" |
| 3525 | 3521 | ], |
| 3526 | 3522 | "primary-bgFill1": ["background-interactive-brand-strong"], |
| 3523 | + "primary-bgFill2": ["background-interactive-brand-strong-active"], | |
| 3527 | 3524 | "primary-fgFill": [ |
| 3528 | 3525 | "foreground-interactive-brand-strong", |
| 3529 | 3526 | "foreground-interactive-brand-strong-active" |
| 3530 | 3527 | ], |
| 3531 | - "primary-bgFill2": ["background-interactive-brand-strong-active"], | |
| 3532 | 3528 | "primary-surface4": ["background-interactive-brand-weak-active"], |
| 3533 | 3529 | "primary-fgSurface4": ["foreground-interactive-brand-active"], |
| 3534 | 3530 | "primary-fgSurface3": ["foreground-interactive-brand"], |
| 3535 | 3531 | "primary-stroke3": [ |
| @@ -3560,13 +3556,13 @@ | ||
| 3560 | 3556 | "warning-fgSurface3": ["foreground-content-warning-weak"], |
| 3561 | 3557 | "warning-stroke3": ["stroke-surface-warning-strong"], |
| 3562 | 3558 | "warning-stroke1": ["stroke-surface-warning"], |
| 3563 | 3559 | "error-bgFill1": ["background-interactive-error-strong"], |
| 3560 | + "error-bgFill2": ["background-interactive-error-strong-active"], | |
| 3564 | 3561 | "error-fgFill": [ |
| 3565 | 3562 | "foreground-interactive-error-strong", |
| 3566 | 3563 | "foreground-interactive-error-strong-active" |
| 3567 | 3564 | ], |
| 3568 | - "error-bgFill2": ["background-interactive-error-strong-active"], | |
| 3569 | 3565 | "error-surface2": [ |
| 3570 | 3566 | "background-interactive-error-active", |
| 3571 | 3567 | "background-surface-error-weak" |
| 3572 | 3568 | ], |
| @@ -3595,9 +3591,14 @@ | ||
| 3595 | 3591 | "background-interactive-error-strong-disabled", |
| 3596 | 3592 | "background-interactive-neutral-strong-disabled" |
| 3597 | 3593 | ], |
| 3598 | 3594 | "bg-surface4": ["background-interactive-neutral-weak-active"], |
| 3599 | - "bg-surface3": ["background-surface-neutral-strong"], | |
| 3595 | + "bg-surface3": [ | |
| 3596 | + "background-interactive-neutral", | |
| 3597 | + "background-interactive-neutral-active", | |
| 3598 | + "background-interactive-neutral-disabled", | |
| 3599 | + "background-surface-neutral-strong" | |
| 3600 | + ], | |
| 3600 | 3601 | "bg-fgSurface4": [ |
| 3601 | 3602 | "foreground-content-neutral", |
| 3602 | 3603 | "foreground-interactive-neutral", |
| 3603 | 3604 | "foreground-interactive-neutral-active", |
| @@ -3655,8 +3656,9 @@ | ||
| 3655 | 3656 | }; |
| 3656 | 3657 | |
| 3657 | 3658 | // packages/theme/build-module/color-ramps/lib/color-utils.mjs |
| 3658 | 3659 | var ALLOWED_SEED_COLOR_SPACES = [srgb_default]; |
| 3660 | + var objectLuminanceCache = /* @__PURE__ */ new WeakMap(); | |
| 3659 | 3661 | function getColorString(color) { |
| 3660 | 3662 | ColorSpace.register(srgb_default); |
| 3661 | 3663 | const rgbRounded = serialize(to(color, srgb_default)); |
| 3662 | 3664 | return serialize(rgbRounded, { format: "hex" }); |
| @@ -3661,12 +3663,33 @@ | ||
| 3661 | 3663 | const rgbRounded = serialize(to(color, srgb_default)); |
| 3662 | 3664 | return serialize(rgbRounded, { format: "hex" }); |
| 3663 | 3665 | } |
| 3664 | 3666 | function getContrast(colorA, colorB) { |
| 3665 | - ColorSpace.register(srgb_default); | |
| 3666 | - return contrastWCAG21(colorA, colorB); | |
| 3667 | + return getContrastFromLuminances( | |
| 3668 | + getRelativeLuminance(colorA), | |
| 3669 | + getRelativeLuminance(colorB) | |
| 3670 | + ); | |
| 3667 | 3671 | } |
| 3668 | - function assertValidSeedColor(seed) { | |
| 3672 | + function getRelativeLuminance(color) { | |
| 3673 | + if (typeof color === "string") { | |
| 3674 | + ColorSpace.register(srgb_default); | |
| 3675 | + return Math.max(getLuminance(color), 0); | |
| 3676 | + } | |
| 3677 | + const cachedLuminance = objectLuminanceCache.get(color); | |
| 3678 | + if (cachedLuminance && equals(cachedLuminance.color, color)) { | |
| 3679 | + return cachedLuminance.luminance; | |
| 3680 | + } | |
| 3681 | + const luminance = Math.max(getLuminance(color), 0); | |
| 3682 | + objectLuminanceCache.set(color, { | |
| 3683 | + color: clone(color), | |
| 3684 | + luminance | |
| 3685 | + }); | |
| 3686 | + return luminance; | |
| 3687 | + } | |
| 3688 | + function getContrastFromLuminances(first, second) { | |
| 3689 | + return first > second ? (first + 0.05) / (second + 0.05) : (second + 0.05) / (first + 0.05); | |
| 3690 | + } | |
| 3691 | + function parseSeedColor(seed) { | |
| 3669 | 3692 | ALLOWED_SEED_COLOR_SPACES.forEach( |
| 3670 | 3693 | (space) => ColorSpace.register(space) |
| 3671 | 3694 | ); |
| 3672 | 3695 | let parsedColor; |
| @@ -3687,11 +3710,11 @@ | ||
| 3687 | 3710 | throw new Error( |
| 3688 | 3711 | `Unsupported seed color "${seed}": expected a fully opaque color.` |
| 3689 | 3712 | ); |
| 3690 | 3713 | } |
| 3714 | + return parsedColor; | |
| 3691 | 3715 | } |
| 3692 | 3716 | function clampToGamut(c) { |
| 3693 | - ColorSpace.register(srgb_default); | |
| 3694 | 3717 | return to(toGamut(c, { space: srgb_default, method: "css" }), oklch_default); |
| 3695 | 3718 | } |
| 3696 | 3719 | |
| 3697 | 3720 | // packages/theme/build-module/color-ramps/lib/constants.mjs |
| @@ -3735,11 +3758,16 @@ | ||
| 3735 | 3758 | dependents.set(step, []); |
| 3736 | 3759 | }); |
| 3737 | 3760 | Object.entries(config).forEach(([stepName, stepConfig]) => { |
| 3738 | 3761 | const step = stepName; |
| 3739 | - const reference = stepConfig.contrast.reference; | |
| 3740 | - dependencies.get(step).push(reference); | |
| 3741 | - 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 | + } | |
| 3742 | 3770 | if (stepConfig.sameAsIfPossible) { |
| 3743 | 3771 | dependencies.get(step).push(stepConfig.sameAsIfPossible); |
| 3744 | 3772 | dependents.get(stepConfig.sameAsIfPossible).push(step); |
| 3745 | 3773 | } |
| @@ -3786,8 +3814,9 @@ | ||
| 3786 | 3814 | if (!stepConfig) { |
| 3787 | 3815 | return; |
| 3788 | 3816 | } |
| 3789 | 3817 | visit(stepConfig.contrast.reference); |
| 3818 | + stepConfig.contrast.additionalReferences?.forEach(visit); | |
| 3790 | 3819 | if (stepConfig.sameAsIfPossible) { |
| 3791 | 3820 | visit(stepConfig.sameAsIfPossible); |
| 3792 | 3821 | } |
| 3793 | 3822 | result.add(step); |
| @@ -3794,11 +3823,20 @@ | ||
| 3794 | 3823 | } |
| 3795 | 3824 | visit(stepName); |
| 3796 | 3825 | return Array.from(result); |
| 3797 | 3826 | } |
| 3798 | - function computeBetterFgColorDirection(seed, preferLighter) { | |
| 3799 | - const contrastAgainstBlack = getContrast(seed, BLACK); | |
| 3800 | - 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 | + ); | |
| 3801 | 3839 | return contrastAgainstBlack > contrastAgainstWhite + (preferLighter ? WHITE_TEXT_CONTRAST_MARGIN : 0) ? { better: "darker", worse: "lighter" } : { better: "lighter", worse: "darker" }; |
| 3802 | 3840 | } |
| 3803 | 3841 | function adjustContrastTarget(target) { |
| 3804 | 3842 | if (target === 1) { |
| @@ -3849,13 +3887,12 @@ | ||
| 3849 | 3887 | return bestC; |
| 3850 | 3888 | } |
| 3851 | 3889 | |
| 3852 | 3890 | // packages/theme/build-module/color-ramps/lib/taper-chroma.mjs |
| 3853 | - function taperChroma(seed, lTarget, options = {}) { | |
| 3891 | + function createChromaTaper(seed, options = {}) { | |
| 3854 | 3892 | const gamut = options.gamut ?? srgb_default; |
| 3855 | 3893 | const alpha = options.alpha ?? 0.65; |
| 3856 | 3894 | const carry = options.carry ?? 0.5; |
| 3857 | - const cUpperBound = options.cUpperBound ?? 0.45; | |
| 3858 | 3895 | const radiusLight = options.radiusLight ?? 0.2; |
| 3859 | 3896 | const radiusDark = options.radiusDark ?? 0.2; |
| 3860 | 3897 | const kLight = options.kLight ?? 0.85; |
| 3861 | 3898 | const kDark = options.kDark ?? 0.85; |
| @@ -3867,37 +3904,34 @@ | ||
| 3867 | 3904 | if (chromaIsTiny || hueIsInvalid) { |
| 3868 | 3905 | if (typeof options.hueFallback === "number") { |
| 3869 | 3906 | hSeed = normalizeHue(options.hueFallback); |
| 3870 | 3907 | } else { |
| 3871 | - return { | |
| 3908 | + return (lTarget) => ({ | |
| 3872 | 3909 | space: oklch_default, |
| 3873 | 3910 | coords: [clamp01(lTarget), 0, 0], |
| 3874 | 3911 | alpha: 1 |
| 3875 | - }; | |
| 3912 | + }); | |
| 3876 | 3913 | } |
| 3877 | 3914 | } |
| 3878 | 3915 | const lSeed = clamp01(get(seed, [oklch_default, "l"])); |
| 3879 | - const cmaxSeed = getCachedMaxChromaAtLH(lSeed, hSeed, gamut, cUpperBound); | |
| 3880 | - const cmaxTarget = getCachedMaxChromaAtLH( | |
| 3881 | - clamp01(lTarget), | |
| 3882 | - hSeed, | |
| 3883 | - gamut, | |
| 3884 | - cUpperBound | |
| 3885 | - ); | |
| 3886 | - let seedRelative = 0; | |
| 3916 | + const cmaxSeed = getMaxChromaAtLH(lSeed, hSeed, gamut); | |
| 3887 | 3917 | const denom = cmaxSeed > 0 ? cmaxSeed : 1e-6; |
| 3888 | - seedRelative = clamp01(cSeed / denom); | |
| 3889 | - const cIntendedBase = alpha * cmaxTarget; | |
| 3890 | - const cWithCarry = cIntendedBase * Math.pow(seedRelative, clamp01(carry)); | |
| 3891 | - const t = continuousTaper(lSeed, lTarget, { | |
| 3892 | - radiusLight, | |
| 3893 | - radiusDark, | |
| 3894 | - kLight, | |
| 3895 | - kDark | |
| 3896 | - }); | |
| 3897 | - const cPlanned = cWithCarry * t; | |
| 3898 | - const lOut = clamp01(lTarget); | |
| 3899 | - 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 | + }; | |
| 3900 | 3934 | } |
| 3901 | 3935 | function clamp01(x) { |
| 3902 | 3936 | if (x < 0) { |
| 3903 | 3937 | return 0; |
| @@ -3928,34 +3962,13 @@ | ||
| 3928 | 3962 | const u = opts.radiusDark > 0 ? Math.abs(d2) / opts.radiusDark : 1; |
| 3929 | 3963 | const w = raisedCosine(u > 1 ? 1 : u); |
| 3930 | 3964 | return 1 - (1 - opts.kDark) * w; |
| 3931 | 3965 | } |
| 3932 | - var maxChromaCache = /* @__PURE__ */ new Map(); | |
| 3933 | - function keyMax(l, h, gamut, cap) { | |
| 3934 | - const lq = quantize(l, 0.05); | |
| 3935 | - const hq = quantize(normalizeHue(h), 10); | |
| 3936 | - const cq = quantize(cap, 0.05); | |
| 3937 | - return `${gamut}|L:${lq}|H:${hq}|cap:${cq}`; | |
| 3938 | - } | |
| 3939 | - function quantize(x, step) { | |
| 3940 | - const k = Math.round(x / step); | |
| 3941 | - return k * step; | |
| 3942 | - } | |
| 3943 | - function getCachedMaxChromaAtLH(l, h, gamutSpace, cap) { | |
| 3944 | - const gamut = gamutSpace.id; | |
| 3945 | - const key = keyMax(l, h, gamut, cap); | |
| 3946 | - const hit = maxChromaCache.get(key); | |
| 3947 | - if (typeof hit === "number") { | |
| 3948 | - return hit; | |
| 3949 | - } | |
| 3950 | - const computed = maxInGamutChromaAtLH(l, h, gamutSpace, cap); | |
| 3951 | - maxChromaCache.set(key, computed); | |
| 3952 | - return computed; | |
| 3953 | - } | |
| 3954 | - function maxInGamutChromaAtLH(l, h, gamutSpace, cap) { | |
| 3966 | + var MAX_CHROMA = 0.45; | |
| 3967 | + function getMaxChromaAtLH(l, h, gamutSpace) { | |
| 3955 | 3968 | const probe = { |
| 3956 | 3969 | space: oklch_default, |
| 3957 | - coords: [l, cap, h], | |
| 3970 | + coords: [clamp01(l), MAX_CHROMA, normalizeHue(h)], | |
| 3958 | 3971 | alpha: 1 |
| 3959 | 3972 | }; |
| 3960 | 3973 | const clamped = toGamutCSS(probe, { space: gamutSpace }); |
| 3961 | 3974 | return get(clamped, [oklch_default, "c"]); |
| @@ -3975,13 +3988,16 @@ | ||
| 3975 | 3988 | reached: true, |
| 3976 | 3989 | achieved: 1 |
| 3977 | 3990 | }; |
| 3978 | 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; | |
| 3979 | 3995 | function getColorForL(l) { |
| 3980 | 3996 | let newL = l; |
| 3981 | - let newC = get(seed, [oklch_default, "c"]); | |
| 3982 | - if (taperChromaOptions) { | |
| 3983 | - const tapered = taperChroma(seed, newL, taperChromaOptions); | |
| 3997 | + let newC = seedChroma; | |
| 3998 | + if (taperChromaAtLightness) { | |
| 3999 | + const tapered = taperChromaAtLightness(newL); | |
| 3984 | 4000 | if ("l" in tapered && "c" in tapered) { |
| 3985 | 4001 | newL = tapered.l; |
| 3986 | 4002 | newC = tapered.c; |
| 3987 | 4003 | } else { |
| @@ -3989,9 +4005,9 @@ | ||
| 3989 | 4005 | } |
| 3990 | 4006 | } |
| 3991 | 4007 | return clampToGamut({ |
| 3992 | 4008 | space: oklch_default, |
| 3993 | - coords: [newL, newC, get(seed, [oklch_default, "h"])], | |
| 4009 | + coords: [newL, newC, seedHue], | |
| 3994 | 4010 | alpha: seed.alpha |
| 3995 | 4011 | }); |
| 3996 | 4012 | } |
| 3997 | 4013 | const mostContrastingL = direction === "lighter" ? 1 : 0; |
| @@ -4055,9 +4071,9 @@ | ||
| 4055 | 4071 | let maxDeficitStep; |
| 4056 | 4072 | const calculatedColors = /* @__PURE__ */ new Map(); |
| 4057 | 4073 | calculatedColors.set("seed", seed); |
| 4058 | 4074 | for (const stepName of sortedSteps) { |
| 4059 | - let computeDirection = function(color, followDirection) { | |
| 4075 | + let computeDirection2 = function(colors, followDirection) { | |
| 4060 | 4076 | if (followDirection === "main") { |
| 4061 | 4077 | return mainDir; |
| 4062 | 4078 | } |
| 4063 | 4079 | if (followDirection === "opposite") { |
| @@ -4064,14 +4080,15 @@ | ||
| 4064 | 4080 | return oppDir; |
| 4065 | 4081 | } |
| 4066 | 4082 | if (followDirection === "best") { |
| 4067 | 4083 | return computeBetterFgColorDirection( |
| 4068 | - color, | |
| 4084 | + colors, | |
| 4069 | 4085 | contrast.preferLighter |
| 4070 | 4086 | ).better; |
| 4071 | 4087 | } |
| 4072 | 4088 | return followDirection; |
| 4073 | 4089 | }; |
| 4090 | + var computeDirection = computeDirection2; | |
| 4074 | 4091 | const { |
| 4075 | 4092 | contrast, |
| 4076 | 4093 | lightness: stepLightnessConstraint, |
| 4077 | 4094 | taperChromaOptions, |
| @@ -4076,14 +4093,21 @@ | ||
| 4076 | 4093 | lightness: stepLightnessConstraint, |
| 4077 | 4094 | taperChromaOptions, |
| 4078 | 4095 | sameAsIfPossible |
| 4079 | 4096 | } = config[stepName]; |
| 4080 | - const referenceColor = calculatedColors.get(contrast.reference); | |
| 4081 | - if (!referenceColor) { | |
| 4082 | - throw new Error( | |
| 4083 | - `Reference color for step ${stepName} not found: ${contrast.reference}` | |
| 4084 | - ); | |
| 4085 | - } | |
| 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 | + }); | |
| 4086 | 4110 | if (sameAsIfPossible) { |
| 4087 | 4111 | const candidateColor = calculatedColors.get(sameAsIfPossible); |
| 4088 | 4112 | if (!candidateColor) { |
| 4089 | 4113 | throw new Error( |
| @@ -4089,23 +4113,26 @@ | ||
| 4089 | 4113 | throw new Error( |
| 4090 | 4114 | `Same-as color for step ${stepName} not found: ${sameAsIfPossible}` |
| 4091 | 4115 | ); |
| 4092 | 4116 | } |
| 4093 | - const candidateContrast = getContrast( | |
| 4094 | - referenceColor, | |
| 4095 | - candidateColor | |
| 4117 | + const adjustedTarget2 = adjustContrastTarget(contrast.target); | |
| 4118 | + const candidateMeetsTarget = referenceColors.every( | |
| 4119 | + (referenceColor2) => getContrast(referenceColor2, candidateColor) >= adjustedTarget2 | |
| 4096 | 4120 | ); |
| 4097 | - const adjustedTarget2 = adjustContrastTarget(contrast.target); | |
| 4098 | - if (candidateContrast >= adjustedTarget2) { | |
| 4121 | + if (candidateMeetsTarget) { | |
| 4099 | 4122 | calculatedColors.set(stepName, candidateColor); |
| 4100 | 4123 | rampResults[stepName] = getColorString(candidateColor); |
| 4101 | 4124 | continue; |
| 4102 | 4125 | } |
| 4103 | 4126 | } |
| 4104 | - const computedDir = computeDirection( | |
| 4105 | - referenceColor, | |
| 4127 | + const computedDir = computeDirection2( | |
| 4128 | + referenceColors, | |
| 4106 | 4129 | contrast.followDirection |
| 4107 | 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 | + ); | |
| 4108 | 4135 | const adjustedTarget = adjustContrastTarget(contrast.target); |
| 4109 | 4136 | let lightnessConstraint; |
| 4110 | 4137 | if (pinLightness?.stepName === stepName) { |
| 4111 | 4138 | lightnessConstraint = { |
| @@ -4152,12 +4179,12 @@ | ||
| 4152 | 4179 | mainDirection, |
| 4153 | 4180 | pinLightness, |
| 4154 | 4181 | rescaleToFitContrastTargets = true |
| 4155 | 4182 | } = {}) { |
| 4156 | - assertValidSeedColor(seedArg); | |
| 4183 | + const parsedSeed = parseSeedColor(seedArg); | |
| 4157 | 4184 | let seed; |
| 4158 | 4185 | try { |
| 4159 | - seed = clampToGamut(seedArg); | |
| 4186 | + seed = clampToGamut(parsedSeed); | |
| 4160 | 4187 | } catch (error) { |
| 4161 | 4188 | throw new Error( |
| 4162 | 4189 | `Invalid seed color "${seedArg}": ${error instanceof Error ? error.message : "Unknown error"}` |
| 4163 | 4190 | ); |
| @@ -4187,12 +4214,13 @@ | ||
| 4187 | 4214 | oppDir, |
| 4188 | 4215 | pinLightness |
| 4189 | 4216 | }); |
| 4190 | 4217 | let bestRamp = rampResults; |
| 4218 | + let bestWarnings = warnings; | |
| 4191 | 4219 | if (maxDeficit > CONTRAST_EPSILON && rescaleToFitContrastTargets) { |
| 4192 | - let getSeedForL = function(l) { | |
| 4220 | + let getSeedForL2 = function(l) { | |
| 4193 | 4221 | return clampToGamut(set(clone(seed), [oklch_default, "l"], l)); |
| 4194 | - }, getDeficitForSeed = function(s) { | |
| 4222 | + }, getDeficitForSeed2 = function(s) { | |
| 4195 | 4223 | const iterationResults = calculateRamp({ |
| 4196 | 4224 | seed: s, |
| 4197 | 4225 | sortedSteps: iterSteps, |
| 4198 | 4226 | config, |
| @@ -4201,8 +4229,9 @@ | ||
| 4201 | 4229 | pinLightness |
| 4202 | 4230 | }); |
| 4203 | 4231 | return iterationResults.maxDeficitDirection === maxDeficitDirection ? iterationResults.maxDeficit : -maxDeficit; |
| 4204 | 4232 | }; |
| 4233 | + var getSeedForL = getSeedForL2, getDeficitForSeed = getDeficitForSeed2; | |
| 4205 | 4234 | const iterSteps = stepsForStep(maxDeficitStep, config); |
| 4206 | 4235 | const lowerSeedL = maxDeficitDirection === "lighter" ? 0 : 1; |
| 4207 | 4236 | const lowerDeficit = -maxDeficit; |
| 4208 | 4237 | const upperSeedL = get(seed, [oklch_default, "l"]); |
| @@ -4207,16 +4236,16 @@ | ||
| 4207 | 4236 | const lowerDeficit = -maxDeficit; |
| 4208 | 4237 | const upperSeedL = get(seed, [oklch_default, "l"]); |
| 4209 | 4238 | const upperDeficit = maxDeficit; |
| 4210 | 4239 | const bestSeed = solveWithBisect( |
| 4211 | - getSeedForL, | |
| 4212 | - getDeficitForSeed, | |
| 4240 | + getSeedForL2, | |
| 4241 | + getDeficitForSeed2, | |
| 4213 | 4242 | lowerSeedL, |
| 4214 | 4243 | lowerDeficit, |
| 4215 | 4244 | upperSeedL, |
| 4216 | 4245 | upperDeficit |
| 4217 | 4246 | ); |
| 4218 | - bestRamp = calculateRamp({ | |
| 4247 | + const finalResult = calculateRamp({ | |
| 4219 | 4248 | seed: bestSeed, |
| 4220 | 4249 | sortedSteps, |
| 4221 | 4250 | config, |
| 4222 | 4251 | mainDir, |
| @@ -4221,9 +4250,11 @@ | ||
| 4221 | 4250 | config, |
| 4222 | 4251 | mainDir, |
| 4223 | 4252 | oppDir, |
| 4224 | 4253 | pinLightness |
| 4225 | - }).rampResults; | |
| 4254 | + }); | |
| 4255 | + bestRamp = finalResult.rampResults; | |
| 4256 | + bestWarnings = finalResult.warnings; | |
| 4226 | 4257 | } |
| 4227 | 4258 | if (mainDir === "darker") { |
| 4228 | 4259 | const tmpSurface1 = bestRamp.surface1; |
| 4229 | 4260 | bestRamp.surface1 = bestRamp.surface3; |
| @@ -4230,9 +4261,9 @@ | ||
| 4230 | 4261 | bestRamp.surface3 = tmpSurface1; |
| 4231 | 4262 | } |
| 4232 | 4263 | return { |
| 4233 | 4264 | ramp: bestRamp, |
| 4234 | - warnings, | |
| 4265 | + warnings: bestWarnings, | |
| 4235 | 4266 | direction: mainDir |
| 4236 | 4267 | }; |
| 4237 | 4268 | } |
| 4238 | 4269 | |
| @@ -4421,11 +4452,12 @@ | ||
| 4421 | 4452 | // fgFill |
| 4422 | 4453 | fgFill: { |
| 4423 | 4454 | contrast: { |
| 4424 | 4455 | reference: "bgFill1", |
| 4456 | + additionalReferences: ["bgFill2"], | |
| 4425 | 4457 | followDirection: "best", |
| 4426 | - target: 4.5, | |
| 4427 | - preferLighter: true | |
| 4458 | + // Preserve the 4.5:1 WCAG floor after 8-bit sRGB serialization. | |
| 4459 | + target: 4.55 | |
| 4428 | 4460 | }, |
| 4429 | 4461 | lightness: lightnessConstraintForegroundHighContrast, |
| 4430 | 4462 | taperChromaOptions: FG_TAPER_CHROMA |
| 4431 | 4463 | }, |
| @@ -4550,8 +4582,160 @@ | ||
| 4550 | 4582 | const bgRampInfo = bgRamp ? getBgRampInfo(bgRamp) : void 0; |
| 4551 | 4583 | return buildRamp(seed, ACCENT_RAMP_CONFIG, bgRampInfo); |
| 4552 | 4584 | } |
| 4553 | 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 | + | |
| 4554 | 4738 | // packages/theme/build-module/use-theme-provider-styles.mjs |
| 4555 | 4739 | var getCachedBgRamp = memize(buildBgRamp, { maxSize: 10 }); |
| 4556 | 4740 | var getCachedAccentRamp = memize(buildAccentRamp, { maxSize: 10 }); |
| 4557 | 4741 | var legacyWpComponentsOverridesCSS = [ |
| @@ -4647,9 +4831,10 @@ | ||
| 4647 | 4831 | function colorTokensCSS(computedColorRamps) { |
| 4648 | 4832 | const entries = []; |
| 4649 | 4833 | for (const [rampName, { ramp }] of computedColorRamps) { |
| 4650 | 4834 | for (const [tokenName, tokenValue] of Object.entries(ramp)) { |
| 4651 | - const key = `${rampName}-${tokenName}`; | |
| 4835 | + const primitiveRampName = rampName === "background" ? "bg" : rampName; | |
| 4836 | + const key = `${primitiveRampName}-${tokenName}`; | |
| 4652 | 4837 | const aliasedBy = color_tokens_default[key] ?? []; |
| 4653 | 4838 | for (const aliasedId of aliasedBy) { |
| 4654 | 4839 | entries.push([`--wpds-color-${aliasedId}`, tokenValue]); |
| 4655 | 4840 | } |
| @@ -4658,14 +4843,14 @@ | ||
| 4658 | 4843 | return entries; |
| 4659 | 4844 | } |
| 4660 | 4845 | function generateStyles({ |
| 4661 | 4846 | primary, |
| 4662 | - computedColorRamps | |
| 4847 | + colorEntries | |
| 4663 | 4848 | }) { |
| 4664 | 4849 | return Object.fromEntries( |
| 4665 | 4850 | [ |
| 4666 | 4851 | // Semantic color tokens |
| 4667 | - colorTokensCSS(computedColorRamps), | |
| 4852 | + colorEntries, | |
| 4668 | 4853 | // Legacy overrides |
| 4669 | 4854 | legacyWpAdminThemeOverridesCSS(primary), |
| 4670 | 4855 | legacyWpComponentsOverridesCSS |
| 4671 | 4856 | ].flat() |
| @@ -4670,8 +4855,35 @@ | ||
| 4670 | 4855 | legacyWpComponentsOverridesCSS |
| 4671 | 4856 | ].flat() |
| 4672 | 4857 | ); |
| 4673 | 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 | + } | |
| 4674 | 4886 | function useThemeProviderStyles({ |
| 4675 | 4887 | color = {}, |
| 4676 | 4888 | cursor, |
| 4677 | 4889 | cornerRadius |
| @@ -4692,46 +4904,30 @@ | ||
| 4692 | 4904 | cornerRadius: cornerRadiusPreset |
| 4693 | 4905 | }), |
| 4694 | 4906 | [primary, background, cursorControl, cornerRadiusPreset] |
| 4695 | 4907 | ); |
| 4696 | - const colorStyles = (0, import_element2.useMemo)(() => { | |
| 4908 | + const generatedColors = (0, import_element2.useMemo)(() => { | |
| 4697 | 4909 | if (primary === void 0 || background === void 0) { |
| 4698 | - return {}; | |
| 4910 | + return { | |
| 4911 | + styles: {}, | |
| 4912 | + warnings: void 0 | |
| 4913 | + }; | |
| 4699 | 4914 | } |
| 4700 | - const seeds = { | |
| 4701 | - ...DEFAULT_SEED_COLORS, | |
| 4702 | - background, | |
| 4703 | - primary | |
| 4704 | - }; | |
| 4705 | - const computedColorRamps = /* @__PURE__ */ new Map(); | |
| 4706 | - const bgRamp = getCachedBgRamp(seeds.background); | |
| 4707 | - Object.entries(seeds).forEach(([rampName, seed]) => { | |
| 4708 | - if (rampName === "background") { | |
| 4709 | - computedColorRamps.set("bg", bgRamp); | |
| 4710 | - } else { | |
| 4711 | - computedColorRamps.set( | |
| 4712 | - rampName, | |
| 4713 | - getCachedAccentRamp(seed, bgRamp) | |
| 4714 | - ); | |
| 4715 | - } | |
| 4716 | - }); | |
| 4717 | - return generateStyles({ | |
| 4718 | - primary: seeds.primary, | |
| 4719 | - computedColorRamps | |
| 4720 | - }); | |
| 4915 | + return generateThemeProviderColors(primary, background); | |
| 4721 | 4916 | }, [primary, background]); |
| 4722 | 4917 | const themeProviderStyles = (0, import_element2.useMemo)( |
| 4723 | 4918 | () => ({ |
| 4724 | - ...colorStyles, | |
| 4919 | + ...generatedColors.styles, | |
| 4725 | 4920 | ...cursorControl && { |
| 4726 | 4921 | "--wpds-cursor-control": cursorControl |
| 4727 | 4922 | } |
| 4728 | 4923 | }), |
| 4729 | - [colorStyles, cursorControl] | |
| 4924 | + [generatedColors.styles, cursorControl] | |
| 4730 | 4925 | ); |
| 4731 | 4926 | return { |
| 4732 | 4927 | resolvedSettings, |
| 4733 | - themeProviderStyles | |
| 4928 | + themeProviderStyles, | |
| 4929 | + colorWarnings: generatedColors.warnings | |
| 4734 | 4930 | }; |
| 4735 | 4931 | } |
| 4736 | 4932 | |
| 4737 | 4933 | // packages/theme/build-module/theme-provider.mjs |
| @@ -4816,11 +5012,11 @@ | ||
| 4816 | 5012 | injectStyle(targetDocument, hash, css); |
| 4817 | 5013 | } |
| 4818 | 5014 | } |
| 4819 | 5015 | if (typeof process === "undefined" || true) { |
| 4820 | - registerStyle("f4e6e06c6a", ".dba930ea7a9438fd__root{display:contents}"); | |
| 5016 | + registerStyle("8d074a190c", "._0ebd6d9bf8b95794__wrapper{display:contents}"); | |
| 4821 | 5017 | } |
| 4822 | - var style_default = { "root": "dba930ea7a9438fd__root" }; | |
| 5018 | + var style_default = { "wrapper": "_0ebd6d9bf8b95794__wrapper" }; | |
| 4823 | 5019 | var rootProviderCountByDocument = /* @__PURE__ */ new WeakMap(); |
| 4824 | 5020 | var ThemeProvider = ({ |
| 4825 | 5021 | children, |
| 4826 | 5022 | color = {}, |
| @@ -4825,16 +5021,18 @@ | ||
| 4825 | 5021 | children, |
| 4826 | 5022 | color = {}, |
| 4827 | 5023 | cursor, |
| 4828 | 5024 | cornerRadius, |
| 4829 | - isRoot = false | |
| 5025 | + isRoot = false, | |
| 5026 | + onColorWarnings | |
| 4830 | 5027 | }) => { |
| 4831 | - const { themeProviderStyles, resolvedSettings } = useThemeProviderStyles({ | |
| 5028 | + const { themeProviderStyles, resolvedSettings, colorWarnings } = useThemeProviderStyles({ | |
| 4832 | 5029 | color, |
| 4833 | 5030 | cursor, |
| 4834 | 5031 | cornerRadius |
| 4835 | 5032 | }); |
| 4836 | 5033 | const cornerRadiusPreset = resolvedSettings.cornerRadius ?? "subtle"; |
| 5034 | + const onColorWarningsEvent = (0, import_compose.useEvent)(onColorWarnings); | |
| 4837 | 5035 | const contextValue = (0, import_element3.useMemo)( |
| 4838 | 5036 | () => ({ |
| 4839 | 5037 | resolvedSettings |
| 4840 | 5038 | }), |
| @@ -4840,8 +5038,13 @@ | ||
| 4840 | 5038 | }), |
| 4841 | 5039 | [resolvedSettings] |
| 4842 | 5040 | ); |
| 4843 | 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]); | |
| 4844 | 5047 | (0, import_compose.useIsomorphicLayoutEffect)(() => { |
| 4845 | 5048 | if (!isRoot) { |
| 4846 | 5049 | return; |
| 4847 | 5050 | } |
| @@ -4860,8 +5063,16 @@ | ||
| 4860 | 5063 | rootProviderCountByDocument.set(doc, active + 1); |
| 4861 | 5064 | } |
| 4862 | 5065 | const previous = /* @__PURE__ */ new Map(); |
| 4863 | 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); | |
| 4864 | 5075 | for (const [rawKey, rawValue] of Object.entries( |
| 4865 | 5076 | themeProviderStyles |
| 4866 | 5077 | )) { |
| 4867 | 5078 | if (!rawKey.startsWith("--") || rawValue === null || rawValue === void 0) { |
| @@ -4887,10 +5098,26 @@ | ||
| 4887 | 5098 | } else { |
| 4888 | 5099 | root.style.removeProperty(key); |
| 4889 | 5100 | } |
| 4890 | 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 | + } | |
| 4891 | 5118 | }; |
| 4892 | - }, [isRoot, themeProviderStyles]); | |
| 5119 | + }, [cornerRadiusPreset, isRoot, themeProviderStyles]); | |
| 4893 | 5120 | return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( |
| 4894 | 5121 | "div", |
| 4895 | 5122 | { |
| 4896 | 5123 | ref: wrapperRef, |
| @@ -4895,9 +5122,9 @@ | ||
| 4895 | 5122 | { |
| 4896 | 5123 | ref: wrapperRef, |
| 4897 | 5124 | "data-wpds-root-provider": isRoot || void 0, |
| 4898 | 5125 | "data-wpds-corner-radius": cornerRadiusPreset, |
| 4899 | - className: style_default.root, | |
| 5126 | + className: style_default.wrapper, | |
| 4900 | 5127 | style: themeProviderStyles, |
| 4901 | 5128 | children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: contextValue, children }) |
| 4902 | 5129 | } |
| 4903 | 5130 | ); |
