Skip to content

@wordpress/theme: update colorjs.io to version 0.6.0 #74278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciampo merged 7 commits into from
Jan 5, 2026
Merged

@wordpress/theme: update colorjs.io to version 0.6.0 #74278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fc07841
Re-enable color ramp unit tests
shimotmk Dec 30, 2025
68fe12a
Update colorjs.io in the @wordpress/theme to version 0.6.0
ciampo Dec 30, 2025
12cc98b
Update code to follow release notes
ciampo Dec 30, 2025
df58598
Update snapshots following colorjs.io version update
ciampo Dec 30, 2025
0c3030c
Avoid unnecessary color space conversions when serializing colors
ciampo Jan 5, 2026
64e918a
Better variable names
ciampo Jan 5, 2026
b5a7773
Remove unnecessary `parse` calls
ciampo Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
498 changes: 12 additions & 486 deletions package-lock.json
View file
Open in desktop
Copy link
Contributor Author

@ciampo ciampo Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I double-checked (with some help from AI too) that the line removals about packages/babel-preset-default/node_modules/** are correct, as npm is deduping some unnecessary dependencies — this is because the root-level @babel/* packages (version 7.25.9) should now satisfy all the requirements, thus making the nested 7.25.7 versions unnecessary.

Large diffs are not rendered by default.

25 changes: 9 additions & 16 deletions packages/theme/bin/generate-primitive-tokens/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
import { parse, to, serialize, sRGB } from 'colorjs.io/fn';
import { to, serialize, sRGB, getAll } from 'colorjs.io/fn';

/**
* Internal dependencies
Expand All @@ -22,26 +22,19 @@ const __dirname = path.dirname( __filename );
// Path to the color.json file
const colorJsonPath = path.join( __dirname, '../../tokens/color.json' );

/**
* Rounds a given hex value (0-255) to 3 decimal places.
*
* 3 decimal places is the minimum precision for lossless hex serialization.
* With 3 decimal places rounding to the nearest 0.001, the maximum rounding
* error is 0.0005. With 256 possible hex values, 0.0005 × 256 = 0.128,
* guaranteeing the rounded value stays within 0.5 of the original value.
*
* @param n - The hex value to round.
* @return The rounded hex value.
*/
const roundHexComponent = ( n: number ) => Math.round( n * 1000 ) / 1000;
// 3 decimal places is the minimum precision for lossless hex serialization.
// With 3 decimal places rounding to the nearest 0.001, the maximum rounding
// error is 0.0005. With 256 possible hex values, 0.0005 × 256 = 0.128,
// guaranteeing the rounded value stays within 0.5 of the original value.
const HEX_ROUNDING_PRECISION = 3;

const transformColorStringToDTCGValue = ( color: string ) => {
const parsed = to( parse( color ), sRGB );
const parsed = to( color, sRGB );

return {
colorSpace: 'srgb',
components: parsed.coords.map( roundHexComponent ),
...( parsed.alpha < 1 ? { alpha: parsed.alpha } : undefined ),
components: getAll( parsed, { precision: HEX_ROUNDING_PRECISION } ),
...( ( parsed.alpha ?? 1 ) < 1 ? { alpha: parsed.alpha } : undefined ),
hex: serialize( parsed, { format: 'hex' } ),
};
};
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"dependencies": {
"@wordpress/element": "file:../element",
"@wordpress/private-apis": "file:../private-apis",
"colorjs.io": "^0.5.2",
"colorjs.io": "^0.6.0",
"memize": "^2.1.0"
},
"devDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/color-ramps/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { get, OKLCH, parse } from 'colorjs.io/fn';
import { get, OKLCH } from 'colorjs.io/fn';

/**
* Internal dependencies
Expand Down Expand Up @@ -44,7 +44,7 @@ function getBgRampInfo( ramp: InternalRampResult ): {
pinLightness: {
stepName: STEP_TO_PIN,
value: clampAccentScaleReferenceLightness(
get( parse( ramp.ramp[ STEP_TO_PIN ] ), [ OKLCH, 'l' ] ),
get( ramp.ramp[ STEP_TO_PIN ], [ OKLCH, 'l' ] ),
ramp.direction
),
},
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/color-ramps/lib/color-utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import './register-color-spaces';
* @return String representation
*/
export function getColorString( color: ColorTypes ): string {
return serialize( to( color, sRGB ), { format: 'hex', inGamut: true } );
return serialize( color, { format: 'hex', inGamut: true } );
}

/**
Expand Down
3 changes: 1 addition & 2 deletions packages/theme/src/color-ramps/lib/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
clone,
get,
OKLCH,
parse,
set,
type ColorTypes,
type PlainColorObject,
Expand Down Expand Up @@ -222,7 +221,7 @@ export function buildRamp(
): RampResult {
let seed: PlainColorObject;
try {
seed = clampToGamut( parse( seedArg ) );
seed = clampToGamut( seedArg );
} catch ( error ) {
throw new Error(
`Invalid seed color "${ seedArg }": ${
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/color-ramps/lib/taper-chroma.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,10 @@ export function taperChroma(
const achromaEpsilon = options.achromaEpsilon ?? 0.005;

const cSeed = Math.max( 0, get( seed, [ OKLCH, 'c' ] ) );
let hSeed = Number( get( seed, [ OKLCH, 'h' ] ) );
let hSeed = get( seed, [ OKLCH, 'h' ] );

const chromaIsTiny = cSeed < achromaEpsilon;
const hueIsInvalid = ! Number.isFinite( hSeed );
const hueIsInvalid = hSeed === null || ! Number.isFinite( hSeed );

if ( chromaIsTiny || hueIsInvalid ) {
if ( typeof options.hueFallback === 'number' ) {
Expand Down
36 changes: 18 additions & 18 deletions packages/theme/src/color-ramps/test/__snapshots__/index.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14387,9 +14387,9 @@ exports[`buildRamps background ramp snapshots 1`] = `
},
{
"input": {
"seedComputed": "#4d4c4d",
"seedComputed": "#4d4d4d",
"seedOriginal": "#4d4d4d",
"seedUnchanged": false,
"seedUnchanged": true,
},
"output": {
"direction": "lighter",
Expand All @@ -14411,7 +14411,7 @@ exports[`buildRamps background ramp snapshots 1`] = `
"stroke3": "#a0a0a0",
"stroke4": "#c6c6c6",
"surface1": "#484848",
"surface2": "#4d4c4d",
"surface2": "#4d4d4d",
"surface3": "#515151",
"surface4": "#555",
"surface5": "#595959",
Expand All @@ -14422,9 +14422,9 @@ exports[`buildRamps background ramp snapshots 1`] = `
},
{
"input": {
"seedComputed": "#4d4c4d",
"seedComputed": "#4d4d4d",
"seedOriginal": "#4d4d4d",
"seedUnchanged": false,
"seedUnchanged": true,
},
"output": {
"direction": "lighter",
Expand All @@ -14446,7 +14446,7 @@ exports[`buildRamps background ramp snapshots 1`] = `
"stroke3": "#a0a0a0",
"stroke4": "#c6c6c6",
"surface1": "#484848",
"surface2": "#4d4c4d",
"surface2": "#4d4d4d",
"surface3": "#515151",
"surface4": "#555",
"surface5": "#595959",
Expand All @@ -14457,9 +14457,9 @@ exports[`buildRamps background ramp snapshots 1`] = `
},
{
"input": {
"seedComputed": "#4d4c4d",
"seedComputed": "#4d4d4d",
"seedOriginal": "#4d4d4d",
"seedUnchanged": false,
"seedUnchanged": true,
},
"output": {
"direction": "lighter",
Expand All @@ -14481,7 +14481,7 @@ exports[`buildRamps background ramp snapshots 1`] = `
"stroke3": "#a0a0a0",
"stroke4": "#c6c6c6",
"surface1": "#484848",
"surface2": "#4d4c4d",
"surface2": "#4d4d4d",
"surface3": "#515151",
"surface4": "#555",
"surface5": "#595959",
Expand All @@ -14492,9 +14492,9 @@ exports[`buildRamps background ramp snapshots 1`] = `
},
{
"input": {
"seedComputed": "#4d4c4d",
"seedComputed": "#4d4d4d",
"seedOriginal": "#4d4d4d",
"seedUnchanged": false,
"seedUnchanged": true,
},
"output": {
"direction": "lighter",
Expand All @@ -14516,7 +14516,7 @@ exports[`buildRamps background ramp snapshots 1`] = `
"stroke3": "#a0a0a0",
"stroke4": "#c6c6c6",
"surface1": "#484848",
"surface2": "#4d4c4d",
"surface2": "#4d4d4d",
"surface3": "#515151",
"surface4": "#555",
"surface5": "#595959",
Expand All @@ -14527,9 +14527,9 @@ exports[`buildRamps background ramp snapshots 1`] = `
},
{
"input": {
"seedComputed": "#4d4c4d",
"seedComputed": "#4d4d4d",
"seedOriginal": "#4d4d4d",
"seedUnchanged": false,
"seedUnchanged": true,
},
"output": {
"direction": "lighter",
Expand All @@ -14551,7 +14551,7 @@ exports[`buildRamps background ramp snapshots 1`] = `
"stroke3": "#a0a0a0",
"stroke4": "#c6c6c6",
"surface1": "#484848",
"surface2": "#4d4c4d",
"surface2": "#4d4d4d",
"surface3": "#515151",
"surface4": "#555",
"surface5": "#595959",
Expand All @@ -14562,9 +14562,9 @@ exports[`buildRamps background ramp snapshots 1`] = `
},
{
"input": {
"seedComputed": "#4d4c4d",
"seedComputed": "#4d4d4d",
"seedOriginal": "#4d4d4d",
"seedUnchanged": false,
"seedUnchanged": true,
},
"output": {
"direction": "lighter",
Expand All @@ -14586,7 +14586,7 @@ exports[`buildRamps background ramp snapshots 1`] = `
"stroke3": "#a0a0a0",
"stroke4": "#c6c6c6",
"surface1": "#484848",
"surface2": "#4d4c4d",
"surface2": "#4d4d4d",
"surface3": "#515151",
"surface4": "#555",
"surface5": "#595959",
Expand Down
39 changes: 15 additions & 24 deletions packages/theme/src/color-ramps/test/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { parse, to, serialize, sRGB } from 'colorjs.io/fn';
import { serialize } from 'colorjs.io/fn';

/**
* Internal dependencies
Expand All @@ -15,7 +15,7 @@ const lStops = [ 100, 90, 80, 70, 60, 50, 40, 30, 20, 10 ];
const sStops = [ 100, 80, 60, 40, 20, 0 ];
const hstops = [ 0, 60, 120, 180, 240, 300 ];

describe.skip( 'buildRamps', () => {
Copy link
Contributor Author

@ciampo ciampo Dec 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's see if, by using colorjs.io's internal rounding, we can get the tests to pass in CI and therefore close #73726

describe( 'buildRamps', () => {
it( 'background ramp snapshots', () => {
const allBgColors = lStops.flatMap( ( l ) =>
sStops.flatMap( ( s ) =>
Expand All @@ -26,17 +26,14 @@ describe.skip( 'buildRamps', () => {
expect(
allBgColors.map( ( bg ) => {
const ramp = buildRamp( bg, BG_RAMP_CONFIG );
const seedOriginal = serialize( to( parse( bg ), sRGB ), {
const seedOriginal = serialize( bg, {
format: 'hex',
inGamut: true,
} );
const seedComputed = serialize( ramp.ramp.surface2, {
format: 'hex',
inGamut: true,
} );
const seedComputed = serialize(
to( parse( ramp.ramp.surface2 ), sRGB ),
{
format: 'hex',
inGamut: true,
}
);

return {
input: {
Expand Down Expand Up @@ -102,20 +99,14 @@ describe.skip( 'buildRamps', () => {
allPrimaryColors.map( ( primary ) =>
options.map( ( o ) => {
const ramp = buildRamp( primary, ACCENT_RAMP_CONFIG, o );
const seedOriginal = serialize(
to( parse( primary ), sRGB ),
{
format: 'hex',
inGamut: true,
}
);
const seedComputed = serialize(
to( parse( ramp.ramp.bgFill1 ), sRGB ),
{
format: 'hex',
inGamut: true,
}
);
const seedOriginal = serialize( primary, {
format: 'hex',
inGamut: true,
} );
const seedComputed = serialize( ramp.ramp.bgFill1, {
format: 'hex',
inGamut: true,
} );

return {
input: {
Expand Down
49 changes: 19 additions & 30 deletions packages/theme/src/use-theme-provider-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
*/
import type { CSSProperties } from 'react';
import {
parse,
clone,
set,
to,
get,
serialize,
sRGB,
HSL,
type ColorTypes,
type PlainColorObject,
} from 'colorjs.io/fn';
import memoize from 'memize';

Expand Down Expand Up @@ -93,44 +93,33 @@ const legacyWpComponentsOverridesCSS: Entry[] = [
],
];

function customRgbFormat( color: ColorTypes ) {
function customRgbFormat( color: PlainColorObject ): string {
const rgb = to( color, sRGB );
return [ get( rgb, 'srgb.r' ), get( rgb, 'srgb.g' ), get( rgb, 'srgb.b' ) ]
.map( ( n ) => Math.round( n * 255 ) )
return rgb.coords
.map( ( n ) => Math.round( ( n ?? 0 ) * 255 ) )
.join( ', ' );
}

function legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {
const parsedAccent = to( parse( accent ), HSL );

const coords = parsedAccent.coords;
const darker10 = to(
{
space: HSL,
coords: [
coords[ 0 ], // h
coords[ 1 ], // s
Math.max( 0, Math.min( 100, coords[ 2 ] - 5 ) ), // l (reduced by 5%)
],
},
sRGB
const parsedAccent = to( accent, HSL );
const parsedL = parsedAccent.coords[ 2 ] ?? 0;

// Create darker version of accent —
const darker10 = set(
clone( parsedAccent ),
[ HSL, 'l' ],
Math.max( 0, parsedL - 5 ) // L reduced by 5%
);
const darker20 = to(
{
space: HSL,
coords: [
coords[ 0 ], // h
coords[ 1 ], // s
Math.max( 0, Math.min( 100, coords[ 2 ] - 10 ) ), // l (reduced by 10%)
],
},
sRGB
const darker20 = set(
clone( parsedAccent ),
[ HSL, 'l' ],
Math.max( 0, parsedL - 10 ) // L reduced by 10%
);

return [
[
'--wp-admin-theme-color',
serialize( to( parsedAccent, sRGB ), { format: 'hex' } ),
serialize( parsedAccent, { format: 'hex' } ),
],
[ '--wp-admin-theme-color--rgb', customRgbFormat( parsedAccent ) ],
[
Expand Down
Loading