← All changes | build/scripts/theme/index.js +141 -95 23.9.1 → trunk View file →

		@@ -3344,25 +3344,20 @@
3344	3344	}
3345	3345	}
3346	3346	});
3347	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	+
3348	3355	// packages/theme/node_modules/colorjs.io/src/luminance.js
3349	3356	function getLuminance(color) {
3350	3357	return get(color, [xyz_d65_default, "y"]);
3351	3358	}
3352	3359
3353		- // packages/theme/node_modules/colorjs.io/src/contrast/WCAG21.js
3354		- function contrastWCAG21(color1, color2) {
3355		- color1 = getColor(color1);
3356		- color2 = getColor(color2);
3357		- let Y1 = Math.max(getLuminance(color1), 0);
3358		- let Y2 = Math.max(getLuminance(color2), 0);
3359		- if (Y2 > Y1) {
3360		- [Y1, Y2] = [Y2, Y1];
3361		- }
3362		- return (Y1 + 0.05) / (Y2 + 0.05);
3363		- }
3364		-
3365	3360	// packages/theme/node_modules/colorjs.io/src/spaces/hsl.js
3366	3361	var hsl_default = new ColorSpace({
3367	3362	id: "hsl",
3368	3363	name: "HSL",
		@@ -3524,13 +3519,13 @@
3524	3519	"background-interactive-neutral-weak",
3525	3520	"background-interactive-neutral-weak-disabled"
3526	3521	],
3527	3522	"primary-bgFill1": ["background-interactive-brand-strong"],
	3523	+ "primary-bgFill2": ["background-interactive-brand-strong-active"],
3528	3524	"primary-fgFill": [
3529	3525	"foreground-interactive-brand-strong",
3530	3526	"foreground-interactive-brand-strong-active"
3531	3527	],
3532		- "primary-bgFill2": ["background-interactive-brand-strong-active"],
3533	3528	"primary-surface4": ["background-interactive-brand-weak-active"],
3534	3529	"primary-fgSurface4": ["foreground-interactive-brand-active"],
3535	3530	"primary-fgSurface3": ["foreground-interactive-brand"],
3536	3531	"primary-stroke3": [
		@@ -3561,13 +3556,13 @@
3561	3556	"warning-fgSurface3": ["foreground-content-warning-weak"],
3562	3557	"warning-stroke3": ["stroke-surface-warning-strong"],
3563	3558	"warning-stroke1": ["stroke-surface-warning"],
3564	3559	"error-bgFill1": ["background-interactive-error-strong"],
	3560	+ "error-bgFill2": ["background-interactive-error-strong-active"],
3565	3561	"error-fgFill": [
3566	3562	"foreground-interactive-error-strong",
3567	3563	"foreground-interactive-error-strong-active"
3568	3564	],
3569		- "error-bgFill2": ["background-interactive-error-strong-active"],
3570	3565	"error-surface2": [
3571	3566	"background-interactive-error-active",
3572	3567	"background-surface-error-weak"
3573	3568	],
		@@ -3596,9 +3591,14 @@
3596	3591	"background-interactive-error-strong-disabled",
3597	3592	"background-interactive-neutral-strong-disabled"
3598	3593	],
3599	3594	"bg-surface4": ["background-interactive-neutral-weak-active"],
3600		- "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	+ ],
3601	3601	"bg-fgSurface4": [
3602	3602	"foreground-content-neutral",
3603	3603	"foreground-interactive-neutral",
3604	3604	"foreground-interactive-neutral-active",
		@@ -3656,8 +3656,9 @@
3656	3656	};
3657	3657
3658	3658	// packages/theme/build-module/color-ramps/lib/color-utils.mjs
3659	3659	var ALLOWED_SEED_COLOR_SPACES = [srgb_default];
	3660	+ var objectLuminanceCache = /* @__PURE__ */ new WeakMap();
3660	3661	function getColorString(color) {
3661	3662	ColorSpace.register(srgb_default);
3662	3663	const rgbRounded = serialize(to(color, srgb_default));
3663	3664	return serialize(rgbRounded, { format: "hex" });
		@@ -3662,12 +3663,33 @@
3662	3663	const rgbRounded = serialize(to(color, srgb_default));
3663	3664	return serialize(rgbRounded, { format: "hex" });
3664	3665	}
3665	3666	function getContrast(colorA, colorB) {
3666		- ColorSpace.register(srgb_default);
3667		- return contrastWCAG21(colorA, colorB);
	3667	+ return getContrastFromLuminances(
	3668	+ getRelativeLuminance(colorA),
	3669	+ getRelativeLuminance(colorB)
	3670	+ );
3668	3671	}
3669		- 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) {
3670	3692	ALLOWED_SEED_COLOR_SPACES.forEach(
3671	3693	(space) => ColorSpace.register(space)
3672	3694	);
3673	3695	let parsedColor;
		@@ -3688,11 +3710,11 @@
3688	3710	throw new Error(
3689	3711	`Unsupported seed color "${seed}": expected a fully opaque color.`
3690	3712	);
3691	3713	}
	3714	+ return parsedColor;
3692	3715	}
3693	3716	function clampToGamut(c) {
3694		- ColorSpace.register(srgb_default);
3695	3717	return to(toGamut(c, { space: srgb_default, method: "css" }), oklch_default);
3696	3718	}
3697	3719
3698	3720	// packages/theme/build-module/color-ramps/lib/constants.mjs
		@@ -3736,11 +3758,16 @@
3736	3758	dependents.set(step, []);
3737	3759	});
3738	3760	Object.entries(config).forEach(([stepName, stepConfig]) => {
3739	3761	const step = stepName;
3740		- const reference = stepConfig.contrast.reference;
3741		- dependencies.get(step).push(reference);
3742		- 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	+ }
3743	3770	if (stepConfig.sameAsIfPossible) {
3744	3771	dependencies.get(step).push(stepConfig.sameAsIfPossible);
3745	3772	dependents.get(stepConfig.sameAsIfPossible).push(step);
3746	3773	}
		@@ -3787,8 +3814,9 @@
3787	3814	if (!stepConfig) {
3788	3815	return;
3789	3816	}
3790	3817	visit(stepConfig.contrast.reference);
	3818	+ stepConfig.contrast.additionalReferences?.forEach(visit);
3791	3819	if (stepConfig.sameAsIfPossible) {
3792	3820	visit(stepConfig.sameAsIfPossible);
3793	3821	}
3794	3822	result.add(step);
		@@ -3795,11 +3823,20 @@
3795	3823	}
3796	3824	visit(stepName);
3797	3825	return Array.from(result);
3798	3826	}
3799		- function computeBetterFgColorDirection(seed, preferLighter) {
3800		- const contrastAgainstBlack = getContrast(seed, BLACK);
3801		- 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	+ );
3802	3839	return contrastAgainstBlack > contrastAgainstWhite + (preferLighter ? WHITE_TEXT_CONTRAST_MARGIN : 0) ? { better: "darker", worse: "lighter" } : { better: "lighter", worse: "darker" };
3803	3840	}
3804	3841	function adjustContrastTarget(target) {
3805	3842	if (target === 1) {
		@@ -3850,13 +3887,12 @@
3850	3887	return bestC;
3851	3888	}
3852	3889
3853	3890	// packages/theme/build-module/color-ramps/lib/taper-chroma.mjs
3854		- function taperChroma(seed, lTarget, options = {}) {
	3891	+ function createChromaTaper(seed, options = {}) {
3855	3892	const gamut = options.gamut ?? srgb_default;
3856	3893	const alpha = options.alpha ?? 0.65;
3857	3894	const carry = options.carry ?? 0.5;
3858		- const cUpperBound = options.cUpperBound ?? 0.45;
3859	3895	const radiusLight = options.radiusLight ?? 0.2;
3860	3896	const radiusDark = options.radiusDark ?? 0.2;
3861	3897	const kLight = options.kLight ?? 0.85;
3862	3898	const kDark = options.kDark ?? 0.85;
		@@ -3868,37 +3904,34 @@
3868	3904	if (chromaIsTiny || hueIsInvalid) {
3869	3905	if (typeof options.hueFallback === "number") {
3870	3906	hSeed = normalizeHue(options.hueFallback);
3871	3907	} else {
3872		- return {
	3908	+ return (lTarget) => ({
3873	3909	space: oklch_default,
3874	3910	coords: [clamp01(lTarget), 0, 0],
3875	3911	alpha: 1
3876		- };
	3912	+ });
3877	3913	}
3878	3914	}
3879	3915	const lSeed = clamp01(get(seed, [oklch_default, "l"]));
3880		- const cmaxSeed = getCachedMaxChromaAtLH(lSeed, hSeed, gamut, cUpperBound);
3881		- const cmaxTarget = getCachedMaxChromaAtLH(
3882		- clamp01(lTarget),
3883		- hSeed,
3884		- gamut,
3885		- cUpperBound
3886		- );
3887		- let seedRelative = 0;
	3916	+ const cmaxSeed = getMaxChromaAtLH(lSeed, hSeed, gamut);
3888	3917	const denom = cmaxSeed > 0 ? cmaxSeed : 1e-6;
3889		- seedRelative = clamp01(cSeed / denom);
3890		- const cIntendedBase = alpha * cmaxTarget;
3891		- const cWithCarry = cIntendedBase * Math.pow(seedRelative, clamp01(carry));
3892		- const t = continuousTaper(lSeed, lTarget, {
3893		- radiusLight,
3894		- radiusDark,
3895		- kLight,
3896		- kDark
3897		- });
3898		- const cPlanned = cWithCarry * t;
3899		- const lOut = clamp01(lTarget);
3900		- 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	+ };
3901	3934	}
3902	3935	function clamp01(x) {
3903	3936	if (x < 0) {
3904	3937	return 0;
		@@ -3929,34 +3962,13 @@
3929	3962	const u = opts.radiusDark > 0 ? Math.abs(d2) / opts.radiusDark : 1;
3930	3963	const w = raisedCosine(u > 1 ? 1 : u);
3931	3964	return 1 - (1 - opts.kDark) * w;
3932	3965	}
3933		- var maxChromaCache = /* @__PURE__ */ new Map();
3934		- function keyMax(l, h, gamut, cap) {
3935		- const lq = quantize(l, 0.05);
3936		- const hq = quantize(normalizeHue(h), 10);
3937		- const cq = quantize(cap, 0.05);
3938		- return `${gamut}|L:${lq}|H:${hq}|cap:${cq}`;
3939		- }
3940		- function quantize(x, step) {
3941		- const k = Math.round(x / step);
3942		- return k * step;
3943		- }
3944		- function getCachedMaxChromaAtLH(l, h, gamutSpace, cap) {
3945		- const gamut = gamutSpace.id;
3946		- const key = keyMax(l, h, gamut, cap);
3947		- const hit = maxChromaCache.get(key);
3948		- if (typeof hit === "number") {
3949		- return hit;
3950		- }
3951		- const computed = maxInGamutChromaAtLH(l, h, gamutSpace, cap);
3952		- maxChromaCache.set(key, computed);
3953		- return computed;
3954		- }
3955		- function maxInGamutChromaAtLH(l, h, gamutSpace, cap) {
	3966	+ var MAX_CHROMA = 0.45;
	3967	+ function getMaxChromaAtLH(l, h, gamutSpace) {
3956	3968	const probe = {
3957	3969	space: oklch_default,
3958		- coords: [l, cap, h],
	3970	+ coords: [clamp01(l), MAX_CHROMA, normalizeHue(h)],
3959	3971	alpha: 1
3960	3972	};
3961	3973	const clamped = toGamutCSS(probe, { space: gamutSpace });
3962	3974	return get(clamped, [oklch_default, "c"]);
		@@ -3976,13 +3988,16 @@
3976	3988	reached: true,
3977	3989	achieved: 1
3978	3990	};
3979	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;
3980	3995	function getColorForL(l) {
3981	3996	let newL = l;
3982		- let newC = get(seed, [oklch_default, "c"]);
3983		- if (taperChromaOptions) {
3984		- const tapered = taperChroma(seed, newL, taperChromaOptions);
	3997	+ let newC = seedChroma;
	3998	+ if (taperChromaAtLightness) {
	3999	+ const tapered = taperChromaAtLightness(newL);
3985	4000	if ("l" in tapered && "c" in tapered) {
3986	4001	newL = tapered.l;
3987	4002	newC = tapered.c;
3988	4003	} else {
		@@ -3990,9 +4005,9 @@
3990	4005	}
3991	4006	}
3992	4007	return clampToGamut({
3993	4008	space: oklch_default,
3994		- coords: [newL, newC, get(seed, [oklch_default, "h"])],
	4009	+ coords: [newL, newC, seedHue],
3995	4010	alpha: seed.alpha
3996	4011	});
3997	4012	}
3998	4013	const mostContrastingL = direction === "lighter" ? 1 : 0;
		@@ -4056,9 +4071,9 @@
4056	4071	let maxDeficitStep;
4057	4072	const calculatedColors = /* @__PURE__ */ new Map();
4058	4073	calculatedColors.set("seed", seed);
4059	4074	for (const stepName of sortedSteps) {
4060		- let computeDirection2 = function(color, followDirection) {
	4075	+ let computeDirection2 = function(colors, followDirection) {
4061	4076	if (followDirection === "main") {
4062	4077	return mainDir;
4063	4078	}
4064	4079	if (followDirection === "opposite") {
		@@ -4065,9 +4080,9 @@
4065	4080	return oppDir;
4066	4081	}
4067	4082	if (followDirection === "best") {
4068	4083	return computeBetterFgColorDirection(
4069		- color,
	4084	+ colors,
4070	4085	contrast.preferLighter
4071	4086	).better;
4072	4087	}
4073	4088	return followDirection;
		@@ -4078,14 +4093,21 @@
4078	4093	lightness: stepLightnessConstraint,
4079	4094	taperChromaOptions,
4080	4095	sameAsIfPossible
4081	4096	} = config[stepName];
4082		- const referenceColor = calculatedColors.get(contrast.reference);
4083		- if (!referenceColor) {
4084		- throw new Error(
4085		- `Reference color for step ${stepName} not found: ${contrast.reference}`
4086		- );
4087		- }
	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	+ });
4088	4110	if (sameAsIfPossible) {
4089	4111	const candidateColor = calculatedColors.get(sameAsIfPossible);
4090	4112	if (!candidateColor) {
4091	4113	throw new Error(
		@@ -4091,14 +4113,13 @@
4091	4113	throw new Error(
4092	4114	`Same-as color for step ${stepName} not found: ${sameAsIfPossible}`
4093	4115	);
4094	4116	}
4095		- const candidateContrast = getContrast(
4096		- referenceColor,
4097		- candidateColor
	4117	+ const adjustedTarget2 = adjustContrastTarget(contrast.target);
	4118	+ const candidateMeetsTarget = referenceColors.every(
	4119	+ (referenceColor2) => getContrast(referenceColor2, candidateColor) >= adjustedTarget2
4098	4120	);
4099		- const adjustedTarget2 = adjustContrastTarget(contrast.target);
4100		- if (candidateContrast >= adjustedTarget2) {
	4121	+ if (candidateMeetsTarget) {
4101	4122	calculatedColors.set(stepName, candidateColor);
4102	4123	rampResults[stepName] = getColorString(candidateColor);
4103	4124	continue;
4104	4125	}
		@@ -4103,11 +4124,15 @@
4103	4124	continue;
4104	4125	}
4105	4126	}
4106	4127	const computedDir = computeDirection2(
4107		- referenceColor,
	4128	+ referenceColors,
4108	4129	contrast.followDirection
4109	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	+ );
4110	4135	const adjustedTarget = adjustContrastTarget(contrast.target);
4111	4136	let lightnessConstraint;
4112	4137	if (pinLightness?.stepName === stepName) {
4113	4138	lightnessConstraint = {
		@@ -4154,12 +4179,12 @@
4154	4179	mainDirection,
4155	4180	pinLightness,
4156	4181	rescaleToFitContrastTargets = true
4157	4182	} = {}) {
4158		- assertValidSeedColor(seedArg);
	4183	+ const parsedSeed = parseSeedColor(seedArg);
4159	4184	let seed;
4160	4185	try {
4161		- seed = clampToGamut(seedArg);
	4186	+ seed = clampToGamut(parsedSeed);
4162	4187	} catch (error) {
4163	4188	throw new Error(
4164	4189	`Invalid seed color "${seedArg}": ${error instanceof Error ? error.message : "Unknown error"}`
4165	4190	);
		@@ -4427,11 +4452,12 @@
4427	4452	// fgFill
4428	4453	fgFill: {
4429	4454	contrast: {
4430	4455	reference: "bgFill1",
	4456	+ additionalReferences: ["bgFill2"],
4431	4457	followDirection: "best",
4432		- target: 4.5,
4433		- preferLighter: true
	4458	+ // Preserve the 4.5:1 WCAG floor after 8-bit sRGB serialization.
	4459	+ target: 4.55
4434	4460	},
4435	4461	lightness: lightnessConstraintForegroundHighContrast,
4436	4462	taperChromaOptions: FG_TAPER_CHROMA
4437	4463	},
		@@ -4559,8 +4585,28 @@
4559	4585
4560	4586	// packages/theme/build-module/semantic-color-contrast-pairs.mjs
4561	4587	var MINIMUM_TEXT_CONTRAST = 4.5;
4562	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	+ },
4563	4609	{
4564	4610	background: "background.surface.neutral",
4565	4611	foreground: "foreground.content.neutral"
4566	4612	},