From 60eefb3e03d9a04c086d4b7083379bb0d3a581ae Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 14 Jul 2026 15:52:04 -0400 Subject: [PATCH 1/3] Theme: Update colorjs.io dependency and drop bug workaround --- package-lock.json | 8 ++++---- packages/theme/package.json | 2 +- packages/theme/src/color-ramps/lib/color-utils.ts | 7 +------ packages/theme/src/color-ramps/lib/taper-chroma.ts | 6 +----- packages/theme/src/color-ramps/test/seed-input.test.ts | 2 +- 5 files changed, 8 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index d243332ade3132..4bbd4480ae7f9d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47933,7 +47933,7 @@ "@wordpress/element": "file:../element", "@wordpress/private-apis": "file:../private-apis", "@wordpress/style-runtime": "file:../style-runtime", - "colorjs.io": "^0.6.0", + "colorjs.io": "^0.7.0", "memize": "^2.1.0" }, "devDependencies": { @@ -47986,9 +47986,9 @@ } }, "packages/theme/node_modules/colorjs.io": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.6.1.tgz", - "integrity": "sha512-8lyR2wHzuIykCpqHKgluGsqQi5iDm3/a2IgP2GBZrasn2sBRkE4NOGsglZxWLs/jZQoNkmA/KM/8NV16rLUdBg==", + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.7.0.tgz", + "integrity": "sha512-JfLy3aZW1Xp2iwSFzGlLn0XSMnIdItH3BmzsXtwHVFEWwVUJIwKBWNzjQq2Tgf3998OY7qW2R6klrlYo8vmEGg==", "license": "MIT", "funding": { "type": "opencollective", diff --git a/packages/theme/package.json b/packages/theme/package.json index 9a406732944acb..1925bbbebeb8a5 100644 --- a/packages/theme/package.json +++ b/packages/theme/package.json @@ -83,7 +83,7 @@ "@wordpress/element": "file:../element", "@wordpress/private-apis": "file:../private-apis", "@wordpress/style-runtime": "file:../style-runtime", - "colorjs.io": "^0.6.0", + "colorjs.io": "^0.7.0", "memize": "^2.1.0" }, "devDependencies": { diff --git a/packages/theme/src/color-ramps/lib/color-utils.ts b/packages/theme/src/color-ramps/lib/color-utils.ts index b2f0fce2052a3e..161e3eaa08ab79 100644 --- a/packages/theme/src/color-ramps/lib/color-utils.ts +++ b/packages/theme/src/color-ramps/lib/color-utils.ts @@ -43,9 +43,7 @@ export function getContrast( * `rgb()`/`rgba()`, or a CSS named color), throwing otherwise. * * Rejection is deterministic regardless of which `ColorSpace`s are globally - * registered: `clampToGamut` registers `OKLCH`, which would otherwise make - * `oklch()` strings parse, but their space id is `oklch` (not `srgb`) so they - * are still rejected. + * registered. * * @param seed The seed-color string to validate. * @throws If `seed` is not an sRGB-parseable, fully opaque string. @@ -87,8 +85,5 @@ export function assertValidSeedColor( seed: string ): void { */ export function clampToGamut( c: string | PlainColorObject ) { ColorSpace.register( sRGB ); - // Workaround for upstream toGamut(method:'css') bug. - // https://github.com/color-js/color.js/pull/734 - ColorSpace.register( OKLCH ); return to( toGamut( c, { space: sRGB, method: 'css' } ), OKLCH ); } diff --git a/packages/theme/src/color-ramps/lib/taper-chroma.ts b/packages/theme/src/color-ramps/lib/taper-chroma.ts index 8c80df9d8ae06a..46e6432b69b0e7 100644 --- a/packages/theme/src/color-ramps/lib/taper-chroma.ts +++ b/packages/theme/src/color-ramps/lib/taper-chroma.ts @@ -1,9 +1,9 @@ import { - ColorSpace, get, toGamut, OKLCH, sRGB, + type ColorSpace, type PlainColorObject, } from 'colorjs.io/fn'; @@ -36,10 +36,6 @@ export function taperChroma( lTarget: number, // [0..1] options: TaperChromaOptions = {} ): { l: number; c: number } | PlainColorObject { - // Workaround for upstream toGamut(method:'css') bug. - // https://github.com/color-js/color.js/pull/734 - ColorSpace.register( OKLCH ); - const gamut = options.gamut ?? sRGB; const alpha = options.alpha ?? 0.65; // 0.7-0.8 works well for accent surface const carry = options.carry ?? 0.5; diff --git a/packages/theme/src/color-ramps/test/seed-input.test.ts b/packages/theme/src/color-ramps/test/seed-input.test.ts index 17d7a9dd4699a0..92beb5f32f2cae 100644 --- a/packages/theme/src/color-ramps/test/seed-input.test.ts +++ b/packages/theme/src/color-ramps/test/seed-input.test.ts @@ -37,7 +37,7 @@ function testSeedColorContract( build: ( seed: string ) => unknown ) { expect( () => build( seed ) ).toThrow(); } ); - it( 'rejects oklch() even when the OKLCH color space is registered', () => { + it( 'rejects non-sRGB color spaces even when the color space is registered', () => { // Registering OKLCH would otherwise make `oklch(...)` strings parse. ColorSpace.register( OKLCH ); expect( () => build( 'oklch(0.7 0.15 250)' ) ).toThrow(); From d1312f95e95cb4d96716b951f432597f9d77b0c2 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 14 Jul 2026 16:03:09 -0400 Subject: [PATCH 2/3] Update CHANGELOG.md --- packages/theme/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md index e585d71f9f71b3..af02d403661b7a 100644 --- a/packages/theme/CHANGELOG.md +++ b/packages/theme/CHANGELOG.md @@ -9,6 +9,7 @@ ### Code Quality - Stop publishing `@wordpress/theme` source paths by moving publish-ready assets outside `src` and enforcing the package boundary ([#80213](https://github.com/WordPress/gutenberg/pull/80213)). +- Update `colorjs.io` dependency to remove need for colorspace registration workaround ([#80272](https://github.com/WordPress/gutenberg/pull/80272)). ## 1.0.0 (2026-07-14) From 7e14b1ea31222309fd64fc2e03eb757a95a0fd3c Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 15 Jul 2026 13:55:56 -0400 Subject: [PATCH 3/3] Theme: Use toGamutCSS for gamut clamping toGamut's `method: 'clip'` path iterates `deltaEMethods` that indirectly pulls in every color space. We don't want every color space, and we don't use `'clip'` method, so targeting the explicit method handler helps effectively drop this extra code. https://github.com/WordPress/gutenberg/pull/80272#issuecomment-4983704695 --- packages/theme/src/color-ramps/lib/taper-chroma.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/theme/src/color-ramps/lib/taper-chroma.ts b/packages/theme/src/color-ramps/lib/taper-chroma.ts index 46e6432b69b0e7..cc1515f7fbc5f3 100644 --- a/packages/theme/src/color-ramps/lib/taper-chroma.ts +++ b/packages/theme/src/color-ramps/lib/taper-chroma.ts @@ -1,6 +1,6 @@ import { get, - toGamut, + toGamutCSS, OKLCH, sRGB, type ColorSpace, @@ -209,7 +209,7 @@ function maxInGamutChromaAtLH( }; // Let `toGamut` reduce the chroma to the gamut maximum. - const clamped = toGamut( probe, { space: gamutSpace, method: 'css' } ); + const clamped = toGamutCSS( probe, { space: gamutSpace } ); return get( clamped, [ OKLCH, 'c' ] ); }