@wordpress/theme 0.3.1-next.8b30e05b0.0 → 0.4.0

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/prebuilt/css/design-tokens.css

@@ -3,20 +3,33 @@
  * ------------------------------------------- */
 
 :root {
-	--wpds-border-radius-large: 8px; /* Large radius */
-	--wpds-border-radius-medium: 4px; /* Medium radius */
-	--wpds-border-radius-small: 2px; /* Small radius */
-	--wpds-border-radius-x-small: 1px; /* Extra small radius */
-	--wpds-border-width-focus: 2px; /* Border width for focus ring */
+	--wpds-border-radius-surface-lg: 8px; /* Large radius for surfaces */
+	--wpds-border-radius-surface-md: 4px; /* Medium radius for surfaces */
+	--wpds-border-radius-surface-sm: 2px; /* Small radius for surfaces */
+	--wpds-border-radius-surface-xs: 1px; /* Extra small radius for surfaces */
+	--wpds-border-width-interactive-focus: 2px; /* Border width for focus ring */
+	--wpds-border-width-surface-lg: 8px; /* Large width for surfaces */
+	--wpds-border-width-surface-md: 4px; /* Medium width for surfaces */
+	--wpds-border-width-surface-sm: 2px; /* Small width for surfaces */
+	--wpds-border-width-surface-xs: 1px; /* Extra small width for surfaces */
 	--wpds-color-bg-interactive-brand: #00000000; /* Background color for interactive elements with brand tone and normal emphasis. */
-	--wpds-color-bg-interactive-brand-active: #f6f8fc; /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-brand-active: #f6f8fd; /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-brand-disabled: #e2e2e2; /* Background color for interactive elements with brand tone and normal emphasis, in their disabled state. */
 	--wpds-color-bg-interactive-brand-strong: #3858e9; /* Background color for interactive elements with brand tone and strong emphasis. */
 	--wpds-color-bg-interactive-brand-strong-active: #2e49d9; /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-brand-strong-disabled: #d2d2d2; /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */
 	--wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */
-	--wpds-color-bg-interactive-brand-weak-active: #e4eaf7; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-brand-weak-active: #e6eaf4; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-brand-weak-disabled: #e2e2e2; /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */
+	--wpds-color-bg-interactive-error: #00000000; /* Background color for interactive elements with error tone and normal emphasis. */
+	--wpds-color-bg-interactive-error-active: #fff6f4; /* Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-error-disabled: #e2e2e2; /* Background color for interactive elements with error tone and normal emphasis, in their disabled state. */
+	--wpds-color-bg-interactive-error-strong: #cc1818; /* Background color for interactive elements with error tone and strong emphasis. */
+	--wpds-color-bg-interactive-error-strong-active: #b90000; /* Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-error-strong-disabled: #d2d2d2; /* Background color for interactive elements with error tone and strong emphasis, in their disabled state. */
+	--wpds-color-bg-interactive-error-weak: #00000000; /* Background color for interactive elements with error tone and weak emphasis. */
+	--wpds-color-bg-interactive-error-weak-active: #f6e6e3; /* Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active. */
+	--wpds-color-bg-interactive-error-weak-disabled: #e2e2e2; /* Background color for interactive elements with error tone and weak emphasis, in their disabled state. */
 	--wpds-color-bg-interactive-neutral: #00000000; /* Background color for interactive elements with neutral tone and normal emphasis. */
 	--wpds-color-bg-interactive-neutral-active: #eaeaea; /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-neutral-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
@@ -27,19 +40,19 @@
 	--wpds-color-bg-interactive-neutral-weak-active: #eaeaea; /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */
 	--wpds-color-bg-interactive-neutral-weak-disabled: #e2e2e2; /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */
 	--wpds-color-bg-surface-brand: #ecf0f9; /* Background color for surfaces with brand tone and normal emphasis. */
-	--wpds-color-bg-surface-caution: #f7eab3; /* Background color for surfaces with caution tone and normal emphasis. */
-	--wpds-color-bg-surface-caution-weak: #fdf9e7; /* Background color for surfaces with caution tone and weak emphasis. */
-	--wpds-color-bg-surface-error: #fae4e1; /* Background color for surfaces with error tone and normal emphasis. */
-	--wpds-color-bg-surface-error-weak: #fdf6f5; /* Background color for surfaces with error tone and weak emphasis. */
-	--wpds-color-bg-surface-info: #dfebf8; /* Background color for surfaces with info tone and normal emphasis. */
-	--wpds-color-bg-surface-info-weak: #f5f9fd; /* Background color for surfaces with info tone and weak emphasis. */
+	--wpds-color-bg-surface-caution: #fee994; /* Background color for surfaces with caution tone and normal emphasis. */
+	--wpds-color-bg-surface-caution-weak: #fff9c9; /* Background color for surfaces with caution tone and weak emphasis. */
+	--wpds-color-bg-surface-error: #f6e6e3; /* Background color for surfaces with error tone and normal emphasis. */
+	--wpds-color-bg-surface-error-weak: #fff6f4; /* Background color for surfaces with error tone and weak emphasis. */
+	--wpds-color-bg-surface-info: #deebfa; /* Background color for surfaces with info tone and normal emphasis. */
+	--wpds-color-bg-surface-info-weak: #f3f9ff; /* Background color for surfaces with info tone and weak emphasis. */
 	--wpds-color-bg-surface-neutral: #f8f8f8; /* Background color for surfaces with normal emphasis. */
 	--wpds-color-bg-surface-neutral-strong: #ffffff; /* Background color for surfaces with strong emphasis. */
 	--wpds-color-bg-surface-neutral-weak: #f0f0f0; /* Background color for surfaces with weak emphasis. */
-	--wpds-color-bg-surface-success: #cbf5d1; /* Background color for surfaces with success tone and normal emphasis. */
-	--wpds-color-bg-surface-success-weak: #f0fcf2; /* Background color for surfaces with success tone and weak emphasis. */
-	--wpds-color-bg-surface-warning: #f8e8cc; /* Background color for surfaces with warning tone and normal emphasis. */
-	--wpds-color-bg-surface-warning-weak: #fdf7ee; /* Background color for surfaces with warning tone and weak emphasis. */
+	--wpds-color-bg-surface-success: #c5f7cc; /* Background color for surfaces with success tone and normal emphasis. */
+	--wpds-color-bg-surface-success-weak: #eaffed; /* Background color for surfaces with success tone and weak emphasis. */
+	--wpds-color-bg-surface-warning: #fde6bd; /* Background color for surfaces with warning tone and normal emphasis. */
+	--wpds-color-bg-surface-warning-weak: #fff7e0; /* Background color for surfaces with warning tone and weak emphasis. */
 	--wpds-color-bg-thumb-brand: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */
 	--wpds-color-bg-thumb-brand-active: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. */
 	--wpds-color-bg-thumb-brand-disabled: #d8d8d8; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */
@@ -48,7 +61,7 @@
 	--wpds-color-bg-track-neutral: #d8d8d8; /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */
 	--wpds-color-bg-track-neutral-weak: #e0e0e0; /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */
 	--wpds-color-fg-content-caution: #281d00; /* Foreground color for content like text with caution tone and normal emphasis. */
-	--wpds-color-fg-content-caution-weak: #836b00; /* Foreground color for content like text with caution tone and weak emphasis. */
+	--wpds-color-fg-content-caution-weak: #826a00; /* Foreground color for content like text with caution tone and weak emphasis. */
 	--wpds-color-fg-content-error: #470000; /* Foreground color for content like text with error tone and normal emphasis. */
 	--wpds-color-fg-content-error-weak: #cc1818; /* Foreground color for content like text with error tone and weak emphasis. */
 	--wpds-color-fg-content-info: #001b4f; /* Foreground color for content like text with info tone and normal emphasis. */
@@ -58,13 +71,19 @@
 	--wpds-color-fg-content-success: #002900; /* Foreground color for content like text with success tone and normal emphasis. */
 	--wpds-color-fg-content-success-weak: #007f30; /* Foreground color for content like text with success tone and weak emphasis. */
 	--wpds-color-fg-content-warning: #2e1900; /* Foreground color for content like text with warning tone and normal emphasis. */
-	--wpds-color-fg-content-warning-weak: #936400; /* Foreground color for content like text with warning tone and weak emphasis. */
+	--wpds-color-fg-content-warning-weak: #926300; /* Foreground color for content like text with warning tone and weak emphasis. */
 	--wpds-color-fg-interactive-brand: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis. */
 	--wpds-color-fg-interactive-brand-active: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */
 	--wpds-color-fg-interactive-brand-disabled: #8a8a8a; /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */
 	--wpds-color-fg-interactive-brand-strong: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis. */
 	--wpds-color-fg-interactive-brand-strong-active: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */
 	--wpds-color-fg-interactive-brand-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */
+	--wpds-color-fg-interactive-error: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis. */
+	--wpds-color-fg-interactive-error-active: #cc1818; /* Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active. */
+	--wpds-color-fg-interactive-error-disabled: #8a8a8a; /* Foreground color for interactive elements with error tone and normal emphasis, in their disabled state. */
+	--wpds-color-fg-interactive-error-strong: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis. */
+	--wpds-color-fg-interactive-error-strong-active: #f2efef; /* Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active. */
+	--wpds-color-fg-interactive-error-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with error tone and strong emphasis, in their disabled state. */
 	--wpds-color-fg-interactive-neutral: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis. */
 	--wpds-color-fg-interactive-neutral-active: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */
 	--wpds-color-fg-interactive-neutral-disabled: #8a8a8a; /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */
@@ -76,26 +95,33 @@
 	--wpds-color-stroke-focus-brand: #3858e9; /* Accessible stroke color applied to focus rings. */
 	--wpds-color-stroke-interactive-brand: #3858e9; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */
 	--wpds-color-stroke-interactive-brand-active: #2337c8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */
-	--wpds-color-stroke-interactive-brand-disabled: #d8d8d8; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */
+	--wpds-color-stroke-interactive-error: #cc1818; /* Accessible stroke color used for interactive error-toned elements with normal emphasis. */
+	--wpds-color-stroke-interactive-error-active: #9d0000; /* Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active. */
 	--wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */
 	--wpds-color-stroke-interactive-neutral: #8a8a8a; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */
 	--wpds-color-stroke-interactive-neutral-active: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */
 	--wpds-color-stroke-interactive-neutral-disabled: #d8d8d8; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */
 	--wpds-color-stroke-interactive-neutral-strong: #6c6c6c; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */
-	--wpds-color-stroke-surface-brand: #a2b1d6; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
-	--wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
-	--wpds-color-stroke-surface-error: #e1a198; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-brand: #a3b1d4; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define brand-toned surface boundaries with strong emphasis. */
+	--wpds-color-stroke-surface-error: #daa39b; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-error-strong: #cc1818; /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */
-	--wpds-color-stroke-surface-info: #9fbcdd; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-info: #9fbcdc; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-info-strong: #006bd7; /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */
 	--wpds-color-stroke-surface-neutral: #d8d8d8; /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-neutral-strong: #8a8a8a; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */
 	--wpds-color-stroke-surface-neutral-weak: #e0e0e0; /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */
-	--wpds-color-stroke-surface-success: #82c98f; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-success: #8ac894; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */
 	--wpds-color-stroke-surface-success-strong: #007f30; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */
-	--wpds-color-stroke-surface-warning: #d2b581; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
-	--wpds-color-stroke-surface-warning-strong: #936400; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
+	--wpds-color-stroke-surface-warning: #d0b381; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */
+	--wpds-color-stroke-surface-warning-strong: #926300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */
 	--wpds-dimension-base: 4px; /* Base dimension unit */
+	--wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
+	--wpds-dimension-gap-lg: 24px; /* Large gap */
+	--wpds-dimension-gap-md: 16px; /* Medium gap */
+	--wpds-dimension-gap-sm: 12px; /* Small gap */
+	--wpds-dimension-gap-xl: 40px; /* Extra large gap */
+	--wpds-dimension-gap-xs: 8px; /* Extra small gap */
 	--wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
 	--wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */
 	--wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */
@@ -130,6 +156,12 @@
 
 [data-wpds-theme-provider-id][data-wpds-density='default'] {
 	--wpds-dimension-base: 4px; /* Base dimension unit */
+	--wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
+	--wpds-dimension-gap-lg: 24px; /* Large gap */
+	--wpds-dimension-gap-md: 16px; /* Medium gap */
+	--wpds-dimension-gap-sm: 12px; /* Small gap */
+	--wpds-dimension-gap-xl: 40px; /* Extra large gap */
+	--wpds-dimension-gap-xs: 8px; /* Extra small gap */
 	--wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
 	--wpds-dimension-padding-surface-lg: 32px; /* Large spacing for surfaces */
 	--wpds-dimension-padding-surface-md: 24px; /* Medium spacing for surfaces */
@@ -138,6 +170,12 @@
 }
 
 [data-wpds-theme-provider-id][data-wpds-density='compact'] {
+	--wpds-dimension-gap-2xs: 4px; /* 2x extra small gap */
+	--wpds-dimension-gap-lg: 20px; /* Large gap */
+	--wpds-dimension-gap-md: 12px; /* Medium gap */
+	--wpds-dimension-gap-sm: 8px; /* Small gap */
+	--wpds-dimension-gap-xl: 32px; /* Extra large gap */
+	--wpds-dimension-gap-xs: 4px; /* Extra small gap */
 	--wpds-dimension-padding-surface-2xs: 4px; /* 2x extra small spacing for surfaces */
 	--wpds-dimension-padding-surface-lg: 24px; /* Large spacing for surfaces */
 	--wpds-dimension-padding-surface-md: 20px; /* Medium spacing for surfaces */
@@ -146,6 +184,12 @@
 }
 
 [data-wpds-theme-provider-id][data-wpds-density='comfortable'] {
+	--wpds-dimension-gap-2xs: 8px; /* 2x extra small gap */
+	--wpds-dimension-gap-lg: 32px; /* Large gap */
+	--wpds-dimension-gap-md: 20px; /* Medium gap */
+	--wpds-dimension-gap-sm: 16px; /* Small gap */
+	--wpds-dimension-gap-xl: 48px; /* Extra large gap */
+	--wpds-dimension-gap-xs: 12px; /* Extra small gap */
 	--wpds-dimension-padding-surface-2xs: 8px; /* 2x extra small spacing for surfaces */
 	--wpds-dimension-padding-surface-lg: 40px; /* Large spacing for surfaces */
 	--wpds-dimension-padding-surface-md: 32px; /* Medium spacing for surfaces */
@@ -155,6 +199,6 @@
 
 @media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi ) {
 	:root {
-		--wpds-border-width-focus: 1.5px; /* Border width for focus ring */
+		--wpds-border-width-interactive-focus: 1.5px; /* Border width for focus ring */
 	}
 }

package/src/prebuilt/js/design-tokens.js

@@ -4,11 +4,15 @@
  */
 
 export default [
-	'--wpds-border-radius-x-small',
-	'--wpds-border-radius-small',
-	'--wpds-border-radius-medium',
-	'--wpds-border-radius-large',
-	'--wpds-border-width-focus',
+	'--wpds-border-radius-surface-xs',
+	'--wpds-border-radius-surface-sm',
+	'--wpds-border-radius-surface-md',
+	'--wpds-border-radius-surface-lg',
+	'--wpds-border-width-surface-xs',
+	'--wpds-border-width-surface-sm',
+	'--wpds-border-width-surface-md',
+	'--wpds-border-width-surface-lg',
+	'--wpds-border-width-interactive-focus',
 	'--wpds-color-bg-surface-neutral',
 	'--wpds-color-bg-surface-neutral-strong',
 	'--wpds-color-bg-surface-neutral-weak',
@@ -41,6 +45,15 @@ export default [
 	'--wpds-color-bg-interactive-brand-weak',
 	'--wpds-color-bg-interactive-brand-weak-active',
 	'--wpds-color-bg-interactive-brand-weak-disabled',
+	'--wpds-color-bg-interactive-error',
+	'--wpds-color-bg-interactive-error-active',
+	'--wpds-color-bg-interactive-error-disabled',
+	'--wpds-color-bg-interactive-error-strong',
+	'--wpds-color-bg-interactive-error-strong-active',
+	'--wpds-color-bg-interactive-error-strong-disabled',
+	'--wpds-color-bg-interactive-error-weak',
+	'--wpds-color-bg-interactive-error-weak-active',
+	'--wpds-color-bg-interactive-error-weak-disabled',
 	'--wpds-color-bg-track-neutral-weak',
 	'--wpds-color-bg-track-neutral',
 	'--wpds-color-bg-thumb-neutral-weak',
@@ -74,6 +87,12 @@ export default [
 	'--wpds-color-fg-interactive-brand-strong',
 	'--wpds-color-fg-interactive-brand-strong-active',
 	'--wpds-color-fg-interactive-brand-strong-disabled',
+	'--wpds-color-fg-interactive-error',
+	'--wpds-color-fg-interactive-error-active',
+	'--wpds-color-fg-interactive-error-disabled',
+	'--wpds-color-fg-interactive-error-strong',
+	'--wpds-color-fg-interactive-error-strong-active',
+	'--wpds-color-fg-interactive-error-strong-disabled',
 	'--wpds-color-stroke-surface-neutral',
 	'--wpds-color-stroke-surface-neutral-weak',
 	'--wpds-color-stroke-surface-neutral-strong',
@@ -93,7 +112,8 @@ export default [
 	'--wpds-color-stroke-interactive-neutral-strong',
 	'--wpds-color-stroke-interactive-brand',
 	'--wpds-color-stroke-interactive-brand-active',
-	'--wpds-color-stroke-interactive-brand-disabled',
+	'--wpds-color-stroke-interactive-error',
+	'--wpds-color-stroke-interactive-error-active',
 	'--wpds-color-stroke-interactive-error-strong',
 	'--wpds-color-stroke-focus-brand',
 	'--wpds-dimension-base',
@@ -102,6 +122,12 @@ export default [
 	'--wpds-dimension-padding-surface-sm',
 	'--wpds-dimension-padding-surface-md',
 	'--wpds-dimension-padding-surface-lg',
+	'--wpds-dimension-gap-2xs',
+	'--wpds-dimension-gap-xs',
+	'--wpds-dimension-gap-sm',
+	'--wpds-dimension-gap-md',
+	'--wpds-dimension-gap-lg',
+	'--wpds-dimension-gap-xl',
 	'--wpds-elevation-x-small',
 	'--wpds-elevation-small',
 	'--wpds-elevation-medium',

package/src/prebuilt/ts/color-tokens.ts

@@ -6,19 +6,19 @@
 export default {
 	'primary-bgFill1': [ 'bg-interactive-brand-strong' ],
 	'primary-fgFill': [
-		'fg-interactive-brand-strong-active',
 		'fg-interactive-brand-strong',
+		'fg-interactive-brand-strong-active',
 	],
 	'primary-bgFill2': [ 'bg-interactive-brand-strong-active' ],
 	'primary-surface2': [ 'bg-interactive-brand-active' ],
 	'primary-surface4': [ 'bg-interactive-brand-weak-active' ],
 	'primary-fgSurface3': [
-		'fg-interactive-brand-active',
 		'fg-interactive-brand',
+		'fg-interactive-brand-active',
 	],
 	'primary-stroke3': [
-		'bg-thumb-brand-active',
 		'bg-thumb-brand',
+		'bg-thumb-brand-active',
 		'stroke-focus-brand',
 		'stroke-interactive-brand',
 		'stroke-surface-brand-strong',
@@ -44,23 +44,44 @@ export default {
 	'warning-fgSurface3': [ 'fg-content-warning-weak' ],
 	'warning-stroke3': [ 'stroke-surface-warning-strong' ],
 	'warning-stroke1': [ 'stroke-surface-warning' ],
-	'error-surface2': [ 'bg-surface-error-weak' ],
-	'error-surface4': [ 'bg-surface-error' ],
+	'error-bgFill1': [ 'bg-interactive-error-strong' ],
+	'error-fgFill': [
+		'fg-interactive-error-strong',
+		'fg-interactive-error-strong-active',
+	],
+	'error-bgFill2': [ 'bg-interactive-error-strong-active' ],
+	'error-surface2': [
+		'bg-interactive-error-active',
+		'bg-surface-error-weak',
+	],
+	'error-surface4': [
+		'bg-interactive-error-weak-active',
+		'bg-surface-error',
+	],
 	'error-fgSurface4': [ 'fg-content-error' ],
-	'error-fgSurface3': [ 'fg-content-error-weak' ],
+	'error-fgSurface3': [
+		'fg-content-error-weak',
+		'fg-interactive-error',
+		'fg-interactive-error-active',
+	],
 	'error-stroke3': [
+		'stroke-interactive-error',
 		'stroke-interactive-error-strong',
 		'stroke-surface-error-strong',
 	],
+	'error-stroke4': [ 'stroke-interactive-error-active' ],
 	'error-stroke1': [ 'stroke-surface-error' ],
 	'bg-surface2': [ 'bg-surface-neutral' ],
 	'bg-surface6': [
 		'bg-interactive-brand-strong-disabled',
+		'bg-interactive-error-strong-disabled',
 		'bg-interactive-neutral-strong-disabled',
 	],
 	'bg-surface5': [
 		'bg-interactive-brand-disabled',
 		'bg-interactive-brand-weak-disabled',
+		'bg-interactive-error-disabled',
+		'bg-interactive-error-weak-disabled',
 		'bg-interactive-neutral-disabled',
 		'bg-interactive-neutral-weak-disabled',
 	],
@@ -71,17 +92,19 @@ export default {
 	'bg-surface3': [ 'bg-surface-neutral-strong' ],
 	'bg-fgSurface4': [
 		'fg-content-neutral',
-		'fg-interactive-neutral-active',
 		'fg-interactive-neutral',
+		'fg-interactive-neutral-active',
 	],
 	'bg-fgSurface3': [
 		'fg-content-neutral-weak',
 		'fg-interactive-brand-strong-disabled',
+		'fg-interactive-error-strong-disabled',
 		'fg-interactive-neutral-strong-disabled',
 		'fg-interactive-neutral-weak',
 	],
 	'bg-fgSurface2': [
 		'fg-interactive-brand-disabled',
+		'fg-interactive-error-disabled',
 		'fg-interactive-neutral-disabled',
 		'fg-interactive-neutral-weak-disabled',
 	],
@@ -98,7 +121,6 @@ export default {
 	'bg-stroke2': [
 		'bg-thumb-brand-disabled',
 		'bg-track-neutral',
-		'stroke-interactive-brand-disabled',
 		'stroke-interactive-neutral-disabled',
 		'stroke-surface-neutral',
 	],
@@ -106,8 +128,8 @@ export default {
 	'bg-bgFillInverted2': [ 'bg-interactive-neutral-strong-active' ],
 	'bg-bgFillInverted1': [ 'bg-interactive-neutral-strong' ],
 	'bg-fgFillInverted': [
-		'fg-interactive-neutral-strong-active',
 		'fg-interactive-neutral-strong',
+		'fg-interactive-neutral-strong-active',
 	],
 	'bg-surface1': [ 'bg-surface-neutral-weak' ],
 	'caution-surface2': [ 'bg-surface-caution-weak' ],