@wordpress/theme 0.2.0 → 0.2.1-next.dc3f6d3c1.0

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

@@ -10,190 +10,190 @@ export const DEFAULT_RAMPS: Record<
 > = {
 	bg: {
 		ramp: {
-			surface2: { color: '#f8f8f8', warning: false },
-			bgFill1: { color: '#555', warning: false },
-			fgFill: { color: '#f0f0f0', warning: false },
-			bgFill2: { color: '#494949', warning: false },
-			surface6: { color: '#d3d3d3', warning: false },
-			surface5: { color: '#e3e3e3', warning: false },
-			surface4: { color: '#eaeaea', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#1e1e1e', warning: false },
-			fgSurface3: { color: '#6e6e6e', warning: false },
-			fgSurface2: { color: '#8b8b8b', warning: false },
-			fgSurface1: { color: '#ababab', warning: false },
-			stroke3: { color: '#8b8b8b', warning: false },
-			stroke4: { color: '#6d6d6d', warning: false },
-			stroke2: { color: '#adadad', warning: false },
-			stroke1: { color: '#cfcfcf', warning: false },
-			bgFillDark: { color: '#1e1e1e', warning: false },
-			fgFillDark: { color: '#f0f0f0', warning: false },
-			bgFillInverted2: { color: '#1e1e1e', warning: false },
-			bgFillInverted1: { color: '#2d2d2d', warning: false },
-			fgFillInverted: { color: '#f0f0f0', warning: false },
-			surface1: { color: '#f0f0f0', warning: false },
+			surface2: '#f8f8f8',
+			bgFill1: '#555',
+			fgFill: '#f0f0f0',
+			bgFill2: '#484848',
+			surface6: '#d2d2d2',
+			surface5: '#e2e2e2',
+			surface4: '#eaeaea',
+			surface3: '#fff',
+			fgSurface4: '#1e1e1e',
+			fgSurface3: '#6d6d6d',
+			fgSurface2: '#8a8a8a',
+			fgSurface1: '#aaa',
+			stroke3: '#8a8a8a',
+			stroke4: '#6c6c6c',
+			stroke2: '#d8d8d8',
+			stroke1: '#e0e0e0',
+			bgFillDark: '#1e1e1e',
+			fgFillDark: '#f0f0f0',
+			bgFillInverted2: '#1e1e1e',
+			bgFillInverted1: '#2d2d2d',
+			fgFillInverted: '#f0f0f0',
+			surface1: '#f0f0f0',
 		},
 		direction: 'darker',
 	},
 	primary: {
 		ramp: {
-			bgFill1: { color: '#3858e9', warning: false },
-			fgFill: { color: '#eff0f2', warning: false },
-			bgFill2: { color: '#2e49da', warning: false },
-			surface2: { color: '#f6f8fc', warning: false },
-			surface6: { color: '#c7d3ef', warning: false },
-			surface5: { color: '#dce3f5', warning: false },
-			surface4: { color: '#e5ebf7', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#080071', warning: false },
-			fgSurface3: { color: '#3858e9', warning: false },
-			fgSurface2: { color: '#5881ff', warning: false },
-			fgSurface1: { color: '#84a9ff', warning: false },
-			stroke3: { color: '#3858e9', warning: false },
-			stroke4: { color: '#2337c8', warning: false },
-			stroke2: { color: '#6d83bf', warning: false },
-			stroke1: { color: '#91a2cf', warning: false },
-			bgFillDark: { color: '#1b1e26', warning: false },
-			fgFillDark: { color: '#eff0f2', warning: false },
-			bgFillInverted2: { color: '#1b1e26', warning: false },
-			bgFillInverted1: { color: '#12009f', warning: false },
-			fgFillInverted: { color: '#eff0f2', warning: false },
-			surface1: { color: '#edf0fa', warning: false },
+			bgFill1: '#3858e9',
+			fgFill: '#eff0f2',
+			bgFill2: '#2e49d9',
+			surface2: '#f6f8fc',
+			surface6: '#c7d2ee',
+			surface5: '#dbe2f4',
+			surface4: '#e4eaf7',
+			surface3: '#fff',
+			fgSurface4: '#0b0070',
+			fgSurface3: '#3858e9',
+			fgSurface2: '#5b82ff',
+			fgSurface1: '#85a9ff',
+			stroke3: '#3858e9',
+			stroke4: '#2337c8',
+			stroke2: '#9aaad3',
+			stroke1: '#a2b1d6',
+			bgFillDark: '#1b1e26',
+			fgFillDark: '#eff0f2',
+			bgFillInverted2: '#1b1e26',
+			bgFillInverted1: '#13009f',
+			fgFillInverted: '#eff0f2',
+			surface1: '#ecf0f9',
 		},
 		direction: 'darker',
 	},
 	info: {
 		ramp: {
-			bgFill1: { color: '#0090ff', warning: false },
-			fgFill: { color: '#1b1e23', warning: false },
-			bgFill2: { color: '#0081ef', warning: false },
-			surface2: { color: '#f5f9fd', warning: false },
-			surface6: { color: '#bed6f1', warning: false },
-			surface5: { color: '#d5e5f6', warning: false },
-			surface4: { color: '#e0ebf8', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#001758', warning: false },
-			fgSurface3: { color: '#006dd9', warning: false },
-			fgSurface2: { color: '#008cfb', warning: false },
-			fgSurface1: { color: '#53b1ff', warning: false },
-			stroke3: { color: '#006dd9', warning: false },
-			stroke4: { color: '#004eb8', warning: false },
-			stroke2: { color: '#5d8fc6', warning: false },
-			stroke1: { color: '#8aaed6', warning: false },
-			bgFillDark: { color: '#1b1e23', warning: false },
-			fgFillDark: { color: '#eff0f2', warning: false },
-			bgFillInverted2: { color: '#1b1e23', warning: false },
-			bgFillInverted1: { color: '#002675', warning: false },
-			fgFillInverted: { color: '#eff0f2', warning: false },
-			surface1: { color: '#eaf1fa', warning: false },
+			bgFill1: '#0090ff',
+			fgFill: '#1b1e23',
+			bgFill2: '#007fed',
+			surface2: '#f5f9fd',
+			surface6: '#bdd5f1',
+			surface5: '#d4e4f6',
+			surface4: '#dfebf8',
+			surface3: '#fff',
+			fgSurface4: '#001b4f',
+			fgSurface3: '#006bd7',
+			fgSurface2: '#008bfa',
+			fgSurface1: '#59b0ff',
+			stroke3: '#006bd7',
+			stroke4: '#004fa9',
+			stroke2: '#94b5d9',
+			stroke1: '#9fbcdd',
+			bgFillDark: '#1b1e23',
+			fgFillDark: '#eff0f2',
+			bgFillInverted2: '#1b1e23',
+			bgFillInverted1: '#002a69',
+			fgFillInverted: '#eff0f2',
+			surface1: '#e9f1fa',
 		},
 		direction: 'darker',
 	},
 	success: {
 		ramp: {
-			bgFill1: { color: '#4ab866', warning: false },
-			fgFill: { color: '#1b1f1c', warning: false },
-			bgFill2: { color: '#37a857', warning: false },
-			surface2: { color: '#f0fcf2', warning: false },
-			surface6: { color: '#7eea95', warning: false },
-			surface5: { color: '#b7f2c1', warning: false },
-			surface4: { color: '#cdf5d3', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#002b00', warning: false },
-			fgSurface3: { color: '#008031', warning: false },
-			fgSurface2: { color: '#2c9f4e', warning: false },
-			fgSurface1: { color: '#54c16f', warning: false },
-			stroke3: { color: '#008031', warning: false },
-			stroke4: { color: '#006314', warning: false },
-			stroke2: { color: '#61986b', warning: false },
-			stroke1: { color: '#77ba84', warning: false },
-			bgFillDark: { color: '#1b1f1c', warning: false },
-			fgFillDark: { color: '#edf2ed', warning: false },
-			bgFillInverted2: { color: '#1b1f1c', warning: false },
-			bgFillInverted1: { color: '#003800', warning: false },
-			fgFillInverted: { color: '#edf2ed', warning: false },
-			surface1: { color: '#ddf8e1', warning: false },
+			bgFill1: '#4ab866',
+			fgFill: '#1b1f1c',
+			bgFill2: '#37a756',
+			surface2: '#f0fcf2',
+			surface6: '#7eea95',
+			surface5: '#b5f1bf',
+			surface4: '#cbf5d1',
+			surface3: '#fff',
+			fgSurface4: '#002900',
+			fgSurface3: '#007f30',
+			fgSurface2: '#2b9e4e',
+			fgSurface1: '#53c06e',
+			stroke3: '#007f30',
+			stroke4: '#006013',
+			stroke2: '#7dc189',
+			stroke1: '#82c98f',
+			bgFillDark: '#1b1f1c',
+			fgFillDark: '#edf2ed',
+			bgFillInverted2: '#1b1f1c',
+			bgFillInverted1: '#003701',
+			fgFillInverted: '#edf2ed',
+			surface1: '#dbf8df',
 		},
 		direction: 'darker',
 	},
 	caution: {
 		ramp: {
-			bgFill1: { color: '#f0d149', warning: false },
-			fgFill: { color: '#1f1e1b', warning: false },
-			bgFill2: { color: '#ddbe30', warning: false },
-			surface2: { color: '#fdf9e7', warning: false },
-			surface6: { color: '#ecd367', warning: false },
-			surface5: { color: '#f5e399', warning: false },
-			surface4: { color: '#f8ebb5', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#291d00', warning: false },
-			fgSurface3: { color: '#876b00', warning: false },
-			fgSurface2: { color: '#a78900', warning: false },
-			fgSurface1: { color: '#c9aa00', warning: false },
-			stroke3: { color: '#876b00', warning: false },
-			stroke4: { color: '#675000', warning: false },
-			stroke2: { color: '#978c60', warning: false },
-			stroke1: { color: '#b8ab75', warning: false },
-			bgFillDark: { color: '#1f1e1b', warning: false },
-			fgFillDark: { color: '#f6f1da', warning: false },
-			bgFillInverted2: { color: '#1f1e1b', warning: false },
-			bgFillInverted1: { color: '#3a2b00', warning: false },
-			fgFillInverted: { color: '#f6f1da', warning: false },
-			surface1: { color: '#faf1cd', warning: false },
+			bgFill1: '#f0d149',
+			fgFill: '#1f1e1b',
+			bgFill2: '#dcbe2f',
+			surface2: '#fdf9e7',
+			surface6: '#ecd264',
+			surface5: '#f5e297',
+			surface4: '#f7eab3',
+			surface3: '#fff',
+			fgSurface4: '#281d00',
+			fgSurface3: '#836b00',
+			fgSurface2: '#a58700',
+			fgSurface1: '#c7a900',
+			stroke3: '#836b00',
+			stroke4: '#635000',
+			stroke2: '#bfb17a',
+			stroke1: '#c7b97f',
+			bgFillDark: '#1f1e1b',
+			fgFillDark: '#f6f1da',
+			bgFillInverted2: '#1f1e1b',
+			bgFillInverted1: '#392c00',
+			fgFillInverted: '#f6f1da',
+			surface1: '#f9f0c8',
 		},
 		direction: 'darker',
 	},
 	warning: {
 		ramp: {
-			bgFill1: { color: '#f0b849', warning: false },
-			fgFill: { color: '#1f1e1b', warning: false },
-			bgFill2: { color: '#dea633', warning: false },
-			surface2: { color: '#fdf7ee', warning: false },
-			surface6: { color: '#f1ce90', warning: false },
-			surface5: { color: '#f6e0bb', warning: false },
-			surface4: { color: '#f8e9cd', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#2f1800', warning: false },
-			fgSurface3: { color: '#976300', warning: false },
-			fgSurface2: { color: '#b78100', warning: false },
-			fgSurface1: { color: '#d9a22e', warning: false },
-			stroke3: { color: '#976300', warning: false },
-			stroke4: { color: '#754900', warning: false },
-			stroke2: { color: '#9f8860', warning: false },
-			stroke1: { color: '#c2a776', warning: false },
-			bgFillDark: { color: '#1f1e1b', warning: false },
-			fgFillDark: { color: '#f3f0e9', warning: false },
-			bgFillInverted2: { color: '#1f1e1b', warning: false },
-			bgFillInverted1: { color: '#432600', warning: false },
-			fgFillInverted: { color: '#f3f0e9', warning: false },
-			surface1: { color: '#faefdc', warning: false },
+			bgFill1: '#f0b849',
+			fgFill: '#1f1e1b',
+			bgFill2: '#dda633',
+			surface2: '#fdf7ee',
+			surface6: '#f1ce8f',
+			surface5: '#f6e0b9',
+			surface4: '#f8e8cc',
+			surface3: '#fff',
+			fgSurface4: '#2e1900',
+			fgSurface3: '#936400',
+			fgSurface2: '#b68000',
+			fgSurface1: '#d8a12c',
+			stroke3: '#936400',
+			stroke4: '#704a00',
+			stroke2: '#caae7c',
+			stroke1: '#d2b581',
+			bgFillDark: '#1f1e1b',
+			fgFillDark: '#f3f0e9',
+			bgFillInverted2: '#1f1e1b',
+			bgFillInverted1: '#422800',
+			fgFillInverted: '#f3f0e9',
+			surface1: '#faeeda',
 		},
 		direction: 'darker',
 	},
 	error: {
 		ramp: {
-			bgFill1: { color: '#cc1818', warning: false },
-			fgFill: { color: '#f2efef', warning: false },
-			bgFill2: { color: '#bc0001', warning: false },
-			surface2: { color: '#fdf6f5', warning: false },
-			surface6: { color: '#f5c9c2', warning: false },
-			surface5: { color: '#f9dcd8', warning: false },
-			surface4: { color: '#fae5e2', warning: false },
-			surface3: { color: '#fff', warning: false },
-			fgSurface4: { color: '#4a0000', warning: false },
-			fgSurface3: { color: '#cc1818', warning: false },
-			fgSurface2: { color: '#f84d41', warning: false },
-			fgSurface1: { color: '#ff8373', warning: false },
-			stroke3: { color: '#cc1818', warning: false },
-			stroke4: { color: '#a70000', warning: false },
-			stroke2: { color: '#ca675c', warning: false },
-			stroke1: { color: '#dc8e83', warning: false },
-			bgFillDark: { color: '#231c1b', warning: false },
-			fgFillDark: { color: '#f2efef', warning: false },
-			bgFillInverted2: { color: '#231c1b', warning: false },
-			bgFillInverted1: { color: '#680000', warning: false },
-			fgFillInverted: { color: '#f2efef', warning: false },
-			surface1: { color: '#fcedea', warning: false },
+			bgFill1: '#cc1818',
+			fgFill: '#f2efef',
+			bgFill2: '#b90000',
+			surface2: '#fdf6f5',
+			surface6: '#f5c8c1',
+			surface5: '#f9dbd7',
+			surface4: '#fae4e1',
+			surface3: '#fff',
+			fgSurface4: '#470000',
+			fgSurface3: '#cc1818',
+			fgSurface2: '#f74c40',
+			fgSurface1: '#ff8879',
+			stroke3: '#cc1818',
+			stroke4: '#9d0000',
+			stroke2: '#de988e',
+			stroke1: '#e1a198',
+			bgFillDark: '#231c1b',
+			fgFillDark: '#f2efef',
+			bgFillInverted2: '#231c1b',
+			bgFillInverted1: '#640000',
+			fgFillInverted: '#f2efef',
+			surface1: '#fbece9',
 		},
 		direction: 'darker',
 	},

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

@@ -7,9 +7,9 @@ import { get, OKLCH, type ColorTypes } from 'colorjs.io/fn';
  * Internal dependencies
  */
 import './register-color-spaces';
-import { clampToGamut, solveWithBisect } from './utils';
+import { solveWithBisect } from './utils';
 import { WHITE, BLACK, CONTRAST_EPSILON } from './constants';
-import { getContrast } from './color-utils';
+import { clampToGamut, getContrast } from './color-utils';
 import { type TaperChromaOptions, taperChroma } from './taper-chroma';
 
 /**

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

@@ -15,10 +15,9 @@ import {
  * Internal dependencies
  */
 import './register-color-spaces';
-import { getContrast, getColorString } from './color-utils';
+import { clampToGamut, getContrast, getColorString } from './color-utils';
 import { findColorMeetingRequirements } from './find-color-with-constraints';
 import {
-	clampToGamut,
 	sortByDependency,
 	computeBetterFgColorDirection,
 	adjustContrastTarget,
@@ -67,10 +66,8 @@ function calculateRamp( {
 		value: number;
 	};
 } ) {
-	const rampResults = {} as Record<
-		keyof Ramp,
-		{ color: string; warning: boolean }
-	>;
+	const rampResults = {} as Record< keyof Ramp, string >;
+	let warnings: string[] | undefined;
 	let maxDeficit = -Infinity;
 	let maxDeficitDirection: RampDirection = 'lighter';
 	let maxDeficitStep;
@@ -113,10 +110,7 @@ function calculateRamp( {
 			if ( candidateContrast >= adjustedTarget ) {
 				// Store the reused color
 				calculatedColors.set( stepName, candidateColor );
-				rampResults[ stepName ] = {
-					color: getColorString( candidateColor ),
-					warning: false,
-				};
+				rampResults[ stepName ] = getColorString( candidateColor );
 
 				continue; // Skip to next step
 			}
@@ -193,14 +187,17 @@ function calculateRamp( {
 		calculatedColors.set( stepName, searchResults.color );
 
 		// Add to results
-		rampResults[ stepName ] = {
-			color: getColorString( searchResults.color ),
-			warning:
-				! contrast.ignoreWhenAdjustingSeed && ! searchResults.reached,
-		};
+		rampResults[ stepName ] = getColorString( searchResults.color );
+
+		if ( ! searchResults.reached && ! contrast.ignoreWhenAdjustingSeed ) {
+			warnings ??= [];
+			warnings.push( stepName );
+		}
 	}
+
 	return {
 		rampResults,
+		warnings,
 		maxDeficit,
 		maxDeficitDirection,
 		maxDeficitStep,
@@ -250,15 +247,20 @@ export function buildRamp(
 	const sortedSteps = sortByDependency( config );
 
 	// Calculate the ramp with the initial seed.
-	const { rampResults, maxDeficit, maxDeficitDirection, maxDeficitStep } =
-		calculateRamp( {
-			seed,
-			sortedSteps,
-			config,
-			mainDir,
-			oppDir,
-			pinLightness,
-		} );
+	const {
+		rampResults,
+		warnings,
+		maxDeficit,
+		maxDeficitDirection,
+		maxDeficitStep,
+	} = calculateRamp( {
+		seed,
+		sortedSteps,
+		config,
+		mainDir,
+		oppDir,
+		pinLightness,
+	} );
 
 	let bestRamp = rampResults;
 
@@ -326,6 +328,7 @@ export function buildRamp(
 
 	return {
 		ramp: bestRamp,
+		warnings,
 		direction: mainDir,
 	};
 }

package/src/color-ramps/lib/ramp-configs.ts

@@ -142,7 +142,7 @@ export const BG_RAMP_CONFIG: RampConfig = {
 		contrast: {
 			reference: 'stroke3',
 			followDirection: 'opposite',
-			target: 2.2,
+			target: 2.6,
 		},
 		taperChromaOptions: STROKE_TAPER_CHROMA,
 	},
@@ -150,7 +150,7 @@ export const BG_RAMP_CONFIG: RampConfig = {
 		contrast: {
 			reference: 'stroke3',
 			followDirection: 'opposite',
-			target: 1.5,
+			target: 2.4,
 		},
 		taperChromaOptions: STROKE_TAPER_CHROMA,
 	},

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

@@ -79,12 +79,7 @@ export type RampStepConfig = {
 export type RampConfig = Record< keyof Ramp, RampStepConfig >;
 
 export type RampResult = {
-	ramp: Record<
-		keyof Ramp,
-		{
-			color: string;
-			warning: boolean;
-		}
-	>;
+	ramp: Record< keyof Ramp, string >;
+	warnings?: string[];
 	direction: RampDirection;
 };

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { toGamut, to, P3, OKLCH, type ColorTypes } from 'colorjs.io/fn';
+import { type ColorTypes } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
@@ -19,13 +19,6 @@ import {
 import type { Ramp, RampConfig, RampDirection } from './types';
 import { getContrast } from './color-utils';
 
-/**
- * Make sure that a color is valid in the p3 gamut, and converts it to oklch.
- * @param c
- */
-export const clampToGamut = ( c: ColorTypes ) =>
-	to( toGamut( c, { space: P3, method: 'css' } ), OKLCH ); // map into Display-P3 using CSS OKLCH method
-
 /**
  * Build a dependency graph from the steps configuration
  * @param config - The steps configuration object

package/src/color-ramps/stories/index.story.tsx

@@ -133,10 +133,12 @@ export const Default: StoryObj< typeof ColorGen > = {
 									fgName,
 									fgColor,
 									unmetContrast,
+									achievedContrast,
 								},
 								i
 							) => (
 								<li key={ i }>
+									{ fgName } (
 									<span
 										style={ {
 											width: 20,
@@ -144,8 +146,8 @@ export const Default: StoryObj< typeof ColorGen > = {
 											backgroundColor: fgColor,
 											display: 'inline-block',
 										} }
-									></span>
-									{ fgName } over
+									/>
+									{ fgColor }) over { bgName } (
 									<span
 										style={ {
 											width: 20,
@@ -153,8 +155,9 @@ export const Default: StoryObj< typeof ColorGen > = {
 											backgroundColor: bgColor,
 											display: 'inline-block',
 										} }
-									></span>
-									{ bgName } did not meet { unmetContrast }
+									/>
+									{ bgColor }) did not meet { unmetContrast },
+									achieved just { achievedContrast }
 								</li>
 							)
 						) }
@@ -224,14 +227,17 @@ export const SampleCombinations: StoryObj< typeof ColorGen > = {
 					value: background,
 				},
 				ramp: bgRamp.ramp,
+				warnings: bgRamp.warnings,
 			};
 
+			const primaryRamp = buildAccentRamp( primary, bgRamp );
 			const primaryRampObj = {
 				seed: {
 					name: 'bgFill1' as const,
 					value: primary,
 				},
-				ramp: buildAccentRamp( primary, bgRamp ).ramp,
+				ramp: primaryRamp.ramp,
+				warnings: primaryRamp.warnings,
 			};
 
 			return [ bgRampObj, primaryRampObj ];