@wordpress/theme 0.3.1-next.8b30e05b0.0 → 0.4.1-next.738bb1424.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/theme",
-	"version": "0.3.1-next.8b30e05b0.0",
+	"version": "0.4.1-next.738bb1424.0",
 	"description": "Theme and context provider for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,13 +22,21 @@
 		"node": ">=18.12.0",
 		"npm": ">=8.19.2"
 	},
-	"main": "build/index.js",
+	"files": [
+		"src",
+		"build",
+		"build-module",
+		"build-types",
+		"*.md"
+	],
+	"type": "module",
+	"main": "build/index.cjs",
 	"module": "build-module/index.js",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.js",
-			"default": "./build/index.js"
+			"default": "./build/index.cjs"
 		},
 		"./design-tokens.css": "./src/prebuilt/css/design-tokens.css",
 		"./design-tokens.js": "./src/prebuilt/js/design-tokens.js",
@@ -43,8 +51,8 @@
 		"build-module/color-ramps/lib/register-color-spaces.js"
 	],
 	"dependencies": {
-		"@wordpress/element": "^6.36.1-next.8b30e05b0.0",
-		"@wordpress/private-apis": "^1.36.1-next.8b30e05b0.0",
+		"@wordpress/element": "^6.36.1-next.738bb1424.0",
+		"@wordpress/private-apis": "^1.36.1-next.738bb1424.0",
 		"colorjs.io": "^0.5.2",
 		"memize": "^2.1.0"
 	},
@@ -62,7 +70,7 @@
 		"build:default-ramps": "node --import=esbuild-esm-loader/register bin/generate-default-ramps/index.ts",
 		"build:tokens": "node --import=esbuild-esm-loader/register bin/generate-primitive-tokens/index.ts && cross-env NODE_OPTIONS=--import=esbuild-esm-loader/register tz build --config terrazzo.config.ts",
 		"build": "npm run build:tokens && npm run build:default-ramps",
-		"postbuild": "prettier --write tokens/color.json src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
+		"postbuild": "prettier --write tokens/color.json tokens/modes src/prebuilt src/color-ramps/lib/default-ramps.ts docs"
 	},
-	"gitHead": "2466f6bc223f8be98c55e1ac7270e8c3e413eaaf"
+	"gitHead": "ab1b004c0d61c295aa34bc86ea07f979343983ce"
 }

package/src/color-ramps/lib/default-ramps.ts

@@ -40,10 +40,10 @@ export const DEFAULT_RAMPS: Record<
 			bgFill1: '#3858e9',
 			fgFill: '#eff0f2',
 			bgFill2: '#2e49d9',
-			surface2: '#f6f8fc',
-			surface6: '#c7d2ee',
+			surface2: '#f6f8fd',
+			surface6: '#c7d2ed',
 			surface5: '#dbe2f4',
-			surface4: '#e4eaf7',
+			surface4: '#e6eaf4',
 			surface3: '#fff',
 			fgSurface4: '#0b0070',
 			fgSurface3: '#3858e9',
@@ -51,11 +51,11 @@ export const DEFAULT_RAMPS: Record<
 			fgSurface1: '#85a9ff',
 			stroke3: '#3858e9',
 			stroke4: '#2337c8',
-			stroke2: '#9aaad3',
-			stroke1: '#a2b1d6',
-			bgFillDark: '#1b1e26',
+			stroke2: '#9caacc',
+			stroke1: '#a3b1d4',
+			bgFillDark: '#1a1e27',
 			fgFillDark: '#eff0f2',
-			bgFillInverted2: '#1b1e26',
+			bgFillInverted2: '#1a1e27',
 			bgFillInverted1: '#13009f',
 			fgFillInverted: '#eff0f2',
 			surface1: '#ecf0f9',
@@ -65,27 +65,27 @@ export const DEFAULT_RAMPS: Record<
 	info: {
 		ramp: {
 			bgFill1: '#0090ff',
-			fgFill: '#1b1e23',
+			fgFill: '#1a1f24',
 			bgFill2: '#007fed',
-			surface2: '#f5f9fd',
-			surface6: '#bdd5f1',
-			surface5: '#d4e4f6',
-			surface4: '#dfebf8',
+			surface2: '#f3f9ff',
+			surface6: '#bcd5f1',
+			surface5: '#d3e4f7',
+			surface4: '#deebfa',
 			surface3: '#fff',
 			fgSurface4: '#001b4f',
 			fgSurface3: '#006bd7',
 			fgSurface2: '#008bfa',
-			fgSurface1: '#59b0ff',
+			fgSurface1: '#58b0ff',
 			stroke3: '#006bd7',
 			stroke4: '#004fa9',
-			stroke2: '#94b5d9',
-			stroke1: '#9fbcdd',
-			bgFillDark: '#1b1e23',
-			fgFillDark: '#eff0f2',
-			bgFillInverted2: '#1b1e23',
+			stroke2: '#95b5d9',
+			stroke1: '#9fbcdc',
+			bgFillDark: '#1a1f24',
+			fgFillDark: '#eef0f3',
+			bgFillInverted2: '#1a1f24',
 			bgFillInverted1: '#002a69',
-			fgFillInverted: '#eff0f2',
-			surface1: '#e9f1fa',
+			fgFillInverted: '#eef0f3',
+			surface1: '#e4f1ff',
 		},
 		direction: 'darker',
 	},
@@ -94,25 +94,25 @@ export const DEFAULT_RAMPS: Record<
 			bgFill1: '#4ab866',
 			fgFill: '#1b1f1c',
 			bgFill2: '#37a756',
-			surface2: '#f0fcf2',
-			surface6: '#7eea95',
-			surface5: '#b5f1bf',
-			surface4: '#cbf5d1',
+			surface2: '#eaffed',
+			surface6: '#88e89b',
+			surface5: '#aff3bb',
+			surface4: '#c5f7cc',
 			surface3: '#fff',
 			fgSurface4: '#002900',
 			fgSurface3: '#007f30',
 			fgSurface2: '#2b9e4e',
-			fgSurface1: '#53c06e',
+			fgSurface1: '#53c16e',
 			stroke3: '#007f30',
 			stroke4: '#006013',
-			stroke2: '#7dc189',
-			stroke1: '#82c98f',
+			stroke2: '#84c08e',
+			stroke1: '#8ac894',
 			bgFillDark: '#1b1f1c',
-			fgFillDark: '#edf2ed',
+			fgFillDark: '#eaf3eb',
 			bgFillInverted2: '#1b1f1c',
 			bgFillInverted1: '#003701',
-			fgFillInverted: '#edf2ed',
-			surface1: '#dbf8df',
+			fgFillInverted: '#eaf3eb',
+			surface1: '#cbfdd2',
 		},
 		direction: 'darker',
 	},
@@ -121,25 +121,25 @@ export const DEFAULT_RAMPS: Record<
 			bgFill1: '#f0d149',
 			fgFill: '#1f1e1b',
 			bgFill2: '#dcbe2f',
-			surface2: '#fdf9e7',
-			surface6: '#ecd264',
-			surface5: '#f5e297',
-			surface4: '#f7eab3',
+			surface2: '#fff9c9',
+			surface6: '#e8d172',
+			surface5: '#f7e18a',
+			surface4: '#fee994',
 			surface3: '#fff',
 			fgSurface4: '#281d00',
-			fgSurface3: '#836b00',
-			fgSurface2: '#a58700',
-			fgSurface1: '#c7a900',
-			stroke3: '#836b00',
-			stroke4: '#635000',
-			stroke2: '#bfb17a',
-			stroke1: '#c7b97f',
+			fgSurface3: '#826a00',
+			fgSurface2: '#a48600',
+			fgSurface1: '#c6a800',
+			stroke3: '#826a00',
+			stroke4: '#624f00',
+			stroke2: '#bdb17e',
+			stroke1: '#c5b883',
 			bgFillDark: '#1f1e1b',
-			fgFillDark: '#f6f1da',
+			fgFillDark: '#fdf1bf',
 			bgFillInverted2: '#1f1e1b',
 			bgFillInverted1: '#392c00',
-			fgFillInverted: '#f6f1da',
-			surface1: '#f9f0c8',
+			fgFillInverted: '#fdf1bf',
+			surface1: '#ffef9b',
 		},
 		direction: 'darker',
 	},
@@ -148,25 +148,25 @@ export const DEFAULT_RAMPS: Record<
 			bgFill1: '#f0b849',
 			fgFill: '#1f1e1b',
 			bgFill2: '#dda633',
-			surface2: '#fdf7ee',
-			surface6: '#f1ce8f',
-			surface5: '#f6e0b9',
-			surface4: '#f8e8cc',
+			surface2: '#fff7e0',
+			surface6: '#f4cc84',
+			surface5: '#faddac',
+			surface4: '#fde6bd',
 			surface3: '#fff',
 			fgSurface4: '#2e1900',
-			fgSurface3: '#936400',
-			fgSurface2: '#b68000',
-			fgSurface1: '#d8a12c',
-			stroke3: '#936400',
-			stroke4: '#704a00',
-			stroke2: '#caae7c',
-			stroke1: '#d2b581',
+			fgSurface3: '#926300',
+			fgSurface2: '#b47f00',
+			fgSurface1: '#d7a02a',
+			stroke3: '#926300',
+			stroke4: '#6f4900',
+			stroke2: '#c7ad7e',
+			stroke1: '#d0b381',
 			bgFillDark: '#1f1e1b',
-			fgFillDark: '#f3f0e9',
+			fgFillDark: '#f7efe2',
 			bgFillInverted2: '#1f1e1b',
 			bgFillInverted1: '#422800',
-			fgFillInverted: '#f3f0e9',
-			surface1: '#faeeda',
+			fgFillInverted: '#f7efe2',
+			surface1: '#ffecc4',
 		},
 		direction: 'darker',
 	},
@@ -175,10 +175,10 @@ export const DEFAULT_RAMPS: Record<
 			bgFill1: '#cc1818',
 			fgFill: '#f2efef',
 			bgFill2: '#b90000',
-			surface2: '#fdf6f5',
-			surface6: '#f5c8c1',
-			surface5: '#f9dbd7',
-			surface4: '#fae4e1',
+			surface2: '#fff6f4',
+			surface6: '#f3c8c2',
+			surface5: '#f8dcd7',
+			surface4: '#f6e6e3',
 			surface3: '#fff',
 			fgSurface4: '#470000',
 			fgSurface3: '#cc1818',
@@ -186,14 +186,14 @@ export const DEFAULT_RAMPS: Record<
 			fgSurface1: '#ff8879',
 			stroke3: '#cc1818',
 			stroke4: '#9d0000',
-			stroke2: '#de988e',
-			stroke1: '#e1a198',
+			stroke2: '#d39c95',
+			stroke1: '#daa39b',
 			bgFillDark: '#231c1b',
 			fgFillDark: '#f2efef',
 			bgFillInverted2: '#231c1b',
 			bgFillInverted1: '#640000',
 			fgFillInverted: '#f2efef',
-			surface1: '#fbece9',
+			surface1: '#fcece9',
 		},
 		direction: 'darker',
 	},

package/src/color-ramps/lib/find-color-with-constraints.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, OKLCH, type ColorTypes } from 'colorjs.io/fn';
+import { get, OKLCH, type PlainColorObject } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
@@ -28,7 +28,6 @@ function cdiff( c1: number, c2: number ) {
  *  - the L applied to the seed meets the contrast target against the reference
  *  - the search is performed in one direction (ie lighter / darker)
  *  - more constraints can be applied around lightness
- *  - chroma could be tapered
  * @param reference
  * @param seed
  * @param target
@@ -40,8 +39,8 @@ function cdiff( c1: number, c2: number ) {
  * @param options.taperChromaOptions
  */
 export function findColorMeetingRequirements(
-	reference: ColorTypes,
-	seed: ColorTypes,
+	reference: PlainColorObject,
+	seed: PlainColorObject,
 	target: number,
 	direction: 'lighter' | 'darker',
 	{
@@ -54,7 +53,12 @@ export function findColorMeetingRequirements(
 		};
 		taperChromaOptions?: TaperChromaOptions;
 	} = {}
-): { color: ColorTypes; reached: boolean; achieved: number; deficit?: number } {
+): {
+	color: PlainColorObject;
+	reached: boolean;
+	achieved: number;
+	deficit?: number;
+} {
 	// A target of 1 means same color.
 	// A target lower than 1 doesn't make sense.
 	if ( target <= 1 ) {
@@ -65,7 +69,7 @@ export function findColorMeetingRequirements(
 		};
 	}
 
-	function getColorForL( l: number ): ColorTypes {
+	function getColorForL( l: number ): PlainColorObject {
 		let newL = l;
 		let newC = get( seed, [ OKLCH, 'c' ] );
 
@@ -140,7 +144,7 @@ export function findColorMeetingRequirements(
 
 	const bestColor = solveWithBisect(
 		getColorForL,
-		( c: ColorTypes ) => cdiff( getContrast( reference, c ), target ),
+		( c ) => cdiff( getContrast( reference, c ), target ),
 		lowerL,
 		lowerContrast,
 		upperL,

package/src/color-ramps/lib/index.ts

@@ -56,7 +56,7 @@ function calculateRamp( {
 	oppDir,
 	pinLightness,
 }: {
-	seed: ColorTypes;
+	seed: PlainColorObject;
 	sortedSteps: ( keyof Ramp )[];
 	config: RampConfig;
 	mainDir: RampDirection;
@@ -74,7 +74,7 @@ function calculateRamp( {
 
 	// Keep track of the calculated colors, as they are going to be useful
 	// when other colors reference them.
-	const calculatedColors = new Map< keyof Ramp | 'seed', ColorTypes >();
+	const calculatedColors = new Map< keyof Ramp | 'seed', PlainColorObject >();
 	calculatedColors.set( 'seed', seed );
 
 	for ( const stepName of sortedSteps ) {
@@ -267,11 +267,11 @@ export function buildRamp(
 	if ( maxDeficit > CONTRAST_EPSILON && rescaleToFitContrastTargets ) {
 		const iterSteps = stepsForStep( maxDeficitStep!, config );
 
-		function getSeedForL( l: number ): ColorTypes {
+		function getSeedForL( l: number ): PlainColorObject {
 			return clampToGamut( set( clone( seed ), [ OKLCH, 'l' ], l ) );
 		}
 
-		function getDeficitForSeed( s: ColorTypes ): number {
+		function getDeficitForSeed( s: PlainColorObject ): number {
 			const iterationResults = calculateRamp( {
 				seed: s,
 				sortedSteps: iterSteps,

package/src/color-ramps/lib/taper-chroma.ts

@@ -3,12 +3,11 @@
  */
 import {
 	get,
-	inGamut,
+	toGamut,
 	OKLCH,
-	P3,
 	sRGB,
-	type ColorTypes,
-	type ColorObject,
+	type PlainColorObject,
+	type ColorSpace,
 } from 'colorjs.io/fn';
 
 /**
@@ -17,7 +16,7 @@ import {
 import './register-color-spaces';
 
 export interface TaperChromaOptions {
-	gamut?: 'p3' | 'srgb'; // target gamut (default "p3")
+	gamut?: ColorSpace; // target gamut (default `sRGB`)
 	alpha?: number; // base fraction of Cmax at target (default 0.62)
 	carry?: number; // seed vividness carry exponent β in [0..1] (default 0.5)
 	cUpperBound?: number; // hard search cap for C (default 0.45)
@@ -41,12 +40,11 @@ export interface TaperChromaOptions {
  * @param options
  */
 export function taperChroma(
-	seed: ColorTypes, // already OKLCH
+	seed: PlainColorObject, // already OKLCH
 	lTarget: number, // [0..1]
 	options: TaperChromaOptions = {}
-): { l: number; c: number } | ColorObject {
-	const gamut = options.gamut ?? 'p3';
-	const gamutSpace = gamut === 'p3' ? P3 : sRGB;
+): { l: number; c: number } | PlainColorObject {
+	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;
 	const cUpperBound = options.cUpperBound ?? 0.45;
@@ -68,24 +66,20 @@ export function taperChroma(
 		} else {
 			// Respect achromatic intent: grayscale at target L
 			return {
-				spaceId: 'oklch',
+				space: OKLCH,
 				coords: [ clamp01( lTarget ), 0, 0 ],
+				alpha: 1,
 			};
 		}
 	}
 
 	// Capacity at seed and target
 	const lSeed = clamp01( get( seed, [ OKLCH, 'l' ] ) );
-	const cmaxSeed = getCachedMaxChromaAtLH(
-		lSeed,
-		hSeed,
-		gamutSpace,
-		cUpperBound
-	);
+	const cmaxSeed = getCachedMaxChromaAtLH( lSeed, hSeed, gamut, cUpperBound );
 	const cmaxTarget = getCachedMaxChromaAtLH(
 		clamp01( lTarget ),
 		hSeed,
-		gamutSpace,
+		gamut,
 		cUpperBound
 	);
 
@@ -106,20 +100,10 @@ export function taperChroma(
 		kLight,
 		kDark,
 	} );
-	let cPlanned = cWithCarry * t;
+	const cPlanned = cWithCarry * t;
 
 	// Downward-only clamp (preserve L & H)
 	const lOut = clamp01( lTarget );
-	const candidate: ColorTypes = {
-		spaceId: 'oklch',
-		coords: [ lOut, cPlanned, hSeed ],
-	};
-	if ( ! inGamut( candidate, gamutSpace ) ) {
-		const cap = Math.min( cPlanned, cUpperBound );
-		cPlanned = getCachedMaxChromaAtLH( lOut, hSeed, gamutSpace, cap );
-	}
-
-	cPlanned = Math.min( cPlanned, cSeed );
 
 	return { l: lOut, c: cPlanned };
 }
@@ -181,19 +165,14 @@ function continuousTaper(
 /* ---- chroma-capacity queries with small caches ---- */
 
 const maxChromaCache = new Map< string, number >();
-
-function keyMax(
-	l: number,
-	h: number,
-	gamut: 'p3' | 'srgb',
-	cap: number
-): string {
+function keyMax( l: number, h: number, gamut: string, cap: number ): string {
 	// Quantize to keep cache compact
-	const lq = quantize( l, 1e-3 );
-	const hq = quantize( normalizeHue( h ), 1e-1 );
-	const cq = quantize( cap, 1e-3 );
+	const lq = quantize( l, 0.05 );
+	const hq = quantize( normalizeHue( h ), 10 );
+	const cq = quantize( cap, 0.05 );
 	return `${ gamut }|L:${ lq }|H:${ hq }|cap:${ cq }`;
 }
+
 function quantize( x: number, step: number ): number {
 	const k = Math.round( x / step );
 	return k * step;
@@ -202,10 +181,10 @@ function quantize( x: number, step: number ): number {
 function getCachedMaxChromaAtLH(
 	l: number,
 	h: number,
-	gamutSpace: typeof P3 | typeof sRGB,
+	gamutSpace: ColorSpace,
 	cap: number
 ): number {
-	const gamut = gamutSpace === P3 ? 'p3' : 'srgb';
+	const gamut = gamutSpace.id;
 	const key = keyMax( l, h, gamut, cap );
 	const hit = maxChromaCache.get( key );
 	if ( typeof hit === 'number' ) {
@@ -218,7 +197,7 @@ function getCachedMaxChromaAtLH(
 }
 
 /**
- * Binary-search the max in-gamut chroma at fixed (L,H) in the target gamut
+ * Find the max in-gamut chroma at fixed (L,H) in the target gamut
  * @param l
  * @param h
  * @param gamutSpace
@@ -227,28 +206,18 @@ function getCachedMaxChromaAtLH(
 function maxInGamutChromaAtLH(
 	l: number,
 	h: number,
-	gamutSpace: typeof P3 | typeof sRGB,
+	gamutSpace: ColorSpace,
 	cap: number
 ): number {
-	let lo = 0;
-	let hi = cap;
-	let ok = 0;
-
-	const lFixed = clamp01( l );
-	const hFixed = normalizeHue( h );
-
-	for ( let i = 0; i < 18; i++ ) {
-		const mid = ( lo + hi ) / 2;
-		const probe: ColorTypes = {
-			spaceId: 'oklch',
-			coords: [ lFixed, mid, hFixed ],
-		};
-		if ( inGamut( probe, gamutSpace ) ) {
-			ok = mid;
-			lo = mid;
-		} else {
-			hi = mid;
-		}
-	}
-	return ok;
+	// Construct a color with maximum chroma.
+	const probe: PlainColorObject = {
+		space: OKLCH,
+		coords: [ l, cap, h ],
+		alpha: 1,
+	};
+
+	// Let `toGamut` reduce the chroma to the gamut maximum.
+	const clamped = toGamut( probe, { space: gamutSpace, method: 'css' } );
+
+	return get( clamped, [ OKLCH, 'c' ] );
 }

package/src/index.ts

@@ -1,2 +1,3 @@
-// Private APIs.
 export { privateApis } from './private-apis';
+export type * from './prebuilt/ts/token-types';
+export { type ThemeProvider } from './theme-provider';