@wordpress/theme 0.2.0 → 0.2.1-next.16d95556a.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: '#494949',
+			surface6: '#d3d3d3',
+			surface5: '#e3e3e3',
+			surface4: '#eaeaea',
+			surface3: '#fff',
+			fgSurface4: '#1e1e1e',
+			fgSurface3: '#6e6e6e',
+			fgSurface2: '#8b8b8b',
+			fgSurface1: '#ababab',
+			stroke3: '#8b8b8b',
+			stroke4: '#6d6d6d',
+			stroke2: '#adadad',
+			stroke1: '#cfcfcf',
+			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: '#2e49da',
+			surface2: '#f6f8fc',
+			surface6: '#c7d3ef',
+			surface5: '#dce3f5',
+			surface4: '#e5ebf7',
+			surface3: '#fff',
+			fgSurface4: '#080071',
+			fgSurface3: '#3858e9',
+			fgSurface2: '#5881ff',
+			fgSurface1: '#84a9ff',
+			stroke3: '#3858e9',
+			stroke4: '#2337c8',
+			stroke2: '#6d83bf',
+			stroke1: '#91a2cf',
+			bgFillDark: '#1b1e26',
+			fgFillDark: '#eff0f2',
+			bgFillInverted2: '#1b1e26',
+			bgFillInverted1: '#12009f',
+			fgFillInverted: '#eff0f2',
+			surface1: '#edf0fa',
 		},
 		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: '#0081ef',
+			surface2: '#f5f9fd',
+			surface6: '#bed6f1',
+			surface5: '#d5e5f6',
+			surface4: '#e0ebf8',
+			surface3: '#fff',
+			fgSurface4: '#001758',
+			fgSurface3: '#006dd9',
+			fgSurface2: '#008cfb',
+			fgSurface1: '#53b1ff',
+			stroke3: '#006dd9',
+			stroke4: '#004eb8',
+			stroke2: '#5d8fc6',
+			stroke1: '#8aaed6',
+			bgFillDark: '#1b1e23',
+			fgFillDark: '#eff0f2',
+			bgFillInverted2: '#1b1e23',
+			bgFillInverted1: '#002675',
+			fgFillInverted: '#eff0f2',
+			surface1: '#eaf1fa',
 		},
 		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: '#37a857',
+			surface2: '#f0fcf2',
+			surface6: '#7eea95',
+			surface5: '#b7f2c1',
+			surface4: '#cdf5d3',
+			surface3: '#fff',
+			fgSurface4: '#002b00',
+			fgSurface3: '#008031',
+			fgSurface2: '#2c9f4e',
+			fgSurface1: '#54c16f',
+			stroke3: '#008031',
+			stroke4: '#006314',
+			stroke2: '#61986b',
+			stroke1: '#77ba84',
+			bgFillDark: '#1b1f1c',
+			fgFillDark: '#edf2ed',
+			bgFillInverted2: '#1b1f1c',
+			bgFillInverted1: '#003800',
+			fgFillInverted: '#edf2ed',
+			surface1: '#ddf8e1',
 		},
 		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: '#ddbe30',
+			surface2: '#fdf9e7',
+			surface6: '#ecd367',
+			surface5: '#f5e399',
+			surface4: '#f8ebb5',
+			surface3: '#fff',
+			fgSurface4: '#291d00',
+			fgSurface3: '#876b00',
+			fgSurface2: '#a78900',
+			fgSurface1: '#c9aa00',
+			stroke3: '#876b00',
+			stroke4: '#675000',
+			stroke2: '#978c60',
+			stroke1: '#b8ab75',
+			bgFillDark: '#1f1e1b',
+			fgFillDark: '#f6f1da',
+			bgFillInverted2: '#1f1e1b',
+			bgFillInverted1: '#3a2b00',
+			fgFillInverted: '#f6f1da',
+			surface1: '#faf1cd',
 		},
 		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: '#dea633',
+			surface2: '#fdf7ee',
+			surface6: '#f1ce90',
+			surface5: '#f6e0bb',
+			surface4: '#f8e9cd',
+			surface3: '#fff',
+			fgSurface4: '#2f1800',
+			fgSurface3: '#976300',
+			fgSurface2: '#b78100',
+			fgSurface1: '#d9a22e',
+			stroke3: '#976300',
+			stroke4: '#754900',
+			stroke2: '#9f8860',
+			stroke1: '#c2a776',
+			bgFillDark: '#1f1e1b',
+			fgFillDark: '#f3f0e9',
+			bgFillInverted2: '#1f1e1b',
+			bgFillInverted1: '#432600',
+			fgFillInverted: '#f3f0e9',
+			surface1: '#faefdc',
 		},
 		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: '#bc0001',
+			surface2: '#fdf6f5',
+			surface6: '#f5c9c2',
+			surface5: '#f9dcd8',
+			surface4: '#fae5e2',
+			surface3: '#fff',
+			fgSurface4: '#4a0000',
+			fgSurface3: '#cc1818',
+			fgSurface2: '#f84d41',
+			fgSurface1: '#ff8373',
+			stroke3: '#cc1818',
+			stroke4: '#a70000',
+			stroke2: '#ca675c',
+			stroke1: '#dc8e83',
+			bgFillDark: '#231c1b',
+			fgFillDark: '#f2efef',
+			bgFillInverted2: '#231c1b',
+			bgFillInverted1: '#680000',
+			fgFillInverted: '#f2efef',
+			surface1: '#fcedea',
 		},
 		direction: 'darker',
 	},

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

@@ -67,10 +67,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 +111,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 +188,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 +248,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 +329,7 @@ export function buildRamp(
 
 	return {
 		ramp: bestRamp,
+		warnings,
 		direction: mainDir,
 	};
 }

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/stories/index.story.tsx

@@ -224,14 +224,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 ];

package/src/color-ramps/stories/ramp-table.tsx

@@ -40,13 +40,8 @@ type RampTableProps = {
 			name: keyof Ramp;
 			value: string;
 		};
-		ramp: Record<
-			keyof Ramp,
-			{
-				color: string;
-				warning: boolean;
-			}
-		>;
+		ramp: Record< keyof Ramp, string >;
+		warnings?: string[];
 	}[];
 };
 export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
@@ -72,26 +67,26 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
 								padding: '8px 4px',
 								fontSize: 11,
 								fontWeight: 500,
-								color: ramps[ 0 ].ramp.fgSurface4.color,
+								color: ramps[ 0 ].ramp.fgSurface4,
 							} }
 						>
 							{ abbr }
 						</div>
 					) ) }
-					{ ramps.map( ( { seed, ramp }, i ) =>
+					{ ramps.map( ( { seed, ramp, warnings = [] }, i ) =>
 						RAMP_TOKENS_ORDER.map( ( { tokenName } ) => (
 							<div
 								key={ `${ seed }-${ i }-${ tokenName }` }
 								style={ {
 									marginBlockStart: i !== 0 ? 4 : 0,
-									backgroundColor: ramp[ tokenName ].color,
+									backgroundColor: ramp[ tokenName ],
 									display: 'grid',
 									gridTemplateRows: '20px 1fr',
 									placeItems: 'center',
 									height: tokenName === seed.name ? 60 : 40,
 									minWidth: 32,
 									fontSize: 14,
-									outline: ramp[ tokenName ].warning
+									outline: warnings.includes( tokenName )
 										? '2px solid red'
 										: '',
 									outlineOffset: '-2px',
@@ -111,8 +106,8 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
 											fontWeight: 500,
 											color:
 												tokenName === 'surface2'
-													? ramp.fgSurface4.color
-													: ramp.fgFill.color,
+													? ramp.fgSurface4
+													: ramp.fgFill,
 										} }
 									>
 										SEED
@@ -139,32 +134,28 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
 											<>
 												<span
 													style={ {
-														color: ramp.fgSurface1
-															.color,
+														color: ramp.fgSurface1,
 													} }
 												>
 													Aa
 												</span>
 												<span
 													style={ {
-														color: ramp.fgSurface2
-															.color,
+														color: ramp.fgSurface2,
 													} }
 												>
 													Aa
 												</span>
 												<span
 													style={ {
-														color: ramp.fgSurface3
-															.color,
+														color: ramp.fgSurface3,
 													} }
 												>
 													Aa
 												</span>
 												<span
 													style={ {
-														color: ramp.fgSurface4
-															.color,
+														color: ramp.fgSurface4,
 													} }
 												>
 													Aa
@@ -174,7 +165,7 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
 										{ tokenName === 'bgFill1' ? (
 											<span
 												style={ {
-													color: ramp.fgFill.color,
+													color: ramp.fgFill,
 												} }
 											>
 												Aa
@@ -183,8 +174,7 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
 										{ tokenName === 'bgFillInverted1' ? (
 											<span
 												style={ {
-													color: ramp.fgFillInverted
-														.color,
+													color: ramp.fgFillInverted,
 												} }
 											>
 												Aa
@@ -193,8 +183,7 @@ export const RampTable = forwardRef< HTMLDivElement, RampTableProps >(
 										{ tokenName === 'bgFillDark' ? (
 											<span
 												style={ {
-													color: ramp.fgFillDark
-														.color,
+													color: ramp.fgFillDark,
 												} }
 											>
 												Aa