@wordpress/theme 0.4.0 → 0.4.1-next.76cff8c98.0

package/src/stylelint-plugins/test/no-unknown-ds-tokens.test.ts

@@ -0,0 +1,47 @@
+import { getStylelintResult } from './utils';
+
+describe( 'flags no warnings with valid wpds tokens css', () => {
+	let result: ReturnType< typeof getStylelintResult >;
+
+	beforeEach( () => {
+		result = getStylelintResult(
+			'./fixtures/no-unknown-ds-tokens-valid.css'
+		);
+	} );
+
+	it( 'did not error', () => {
+		return result.then( ( data ) => expect( data.errored ).toBeFalsy() );
+	} );
+
+	it( 'flags no warnings', () => {
+		return result.then( ( data ) =>
+			expect( data.results[ 0 ].warnings ).toHaveLength( 0 )
+		);
+	} );
+} );
+
+describe( 'flags warnings with invalid wpds tokens css', () => {
+	let result: ReturnType< typeof getStylelintResult >;
+
+	beforeEach( () => {
+		result = getStylelintResult(
+			'./fixtures/no-unknown-ds-tokens-invalid.css'
+		);
+	} );
+
+	it( 'did error', () => {
+		return result.then( ( data ) => expect( data.errored ).toBeTruthy() );
+	} );
+
+	it( 'flags correct number of warnings', () => {
+		return result.then( ( data ) =>
+			expect( data.results[ 0 ].warnings ).toHaveLength( 2 )
+		);
+	} );
+
+	it( 'snapshot matches warnings', () => {
+		return result.then( ( data ) =>
+			expect( data.results[ 0 ].warnings ).toMatchSnapshot()
+		);
+	} );
+} );

package/src/stylelint-plugins/test/utils/index.ts

@@ -0,0 +1,29 @@
+import util from 'node:util';
+import path from 'node:path';
+import childProcess from 'node:child_process';
+
+const execute = util.promisify( childProcess.exec );
+
+const generateStylelintCommand = ( filename: string ): string =>
+	'npx stylelint ' +
+	path.resolve( __dirname, '../', filename ) +
+	' -c ' +
+	path.resolve( __dirname, '../', './.stylelintrc.json' ) +
+	' --formatter json' +
+	' --ignore-path ' +
+	path.resolve( __dirname, '../', './.stylelintignore' );
+
+export const getStylelintResult = ( filename: string ) =>
+	execute( generateStylelintCommand( filename ) )
+		.then( ( { stderr } ) => {
+			return {
+				errored: false,
+				results: JSON.parse( stderr as string ),
+			};
+		} )
+		.catch( ( { stderr } ) => {
+			return {
+				errored: true,
+				results: JSON.parse( stderr ),
+			};
+		} );

package/src/use-theme-provider-styles.ts

@@ -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';
 
@@ -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 ) ],
 		[

package/bin/generate-default-ramps/index.ts

@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { writeFile } from 'node:fs/promises';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-/**
- * Internal dependencies
- */
-import {
-	DEFAULT_SEED_COLORS,
-	buildBgRamp,
-	buildAccentRamp,
-} from '../../src/color-ramps/index.ts';
-
-const __dirname = dirname( fileURLToPath( import.meta.url ) );
-
-const bgRamp = buildBgRamp( DEFAULT_SEED_COLORS.bg );
-const accentRamps = Object.fromEntries(
-	[ ...Object.entries( DEFAULT_SEED_COLORS ) ]
-		.filter( ( [ scaleName ] ) => scaleName !== 'bg' )
-		.map( ( [ scaleName, seed ] ) => [
-			scaleName,
-			buildAccentRamp( seed, bgRamp ),
-		] )
-);
-
-const ramps = { bg: bgRamp, ...accentRamps };
-
-const outputPath = join(
-	__dirname,
-	'../../src/color-ramps/lib/default-ramps.ts'
-);
-
-const content = `
-/**
- * Internal dependencies
- */
-import type { RampResult } from './types';
-import type { DEFAULT_SEED_COLORS } from './constants';
-
-export const DEFAULT_RAMPS: Record<
-	keyof typeof DEFAULT_SEED_COLORS,
-	RampResult
-> = ${ JSON.stringify( ramps ) };
-`;
-
-await writeFile( outputPath, content );

package/bin/generate-primitive-tokens/index.ts

@@ -1,113 +0,0 @@
-/**
- * External dependencies
- */
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { parse, to, serialize, sRGB } from 'colorjs.io/fn';
-
-/**
- * Internal dependencies
- */
-import '../../src/color-ramps/lib/register-color-spaces';
-import {
-	DEFAULT_SEED_COLORS,
-	buildBgRamp,
-	buildAccentRamp,
-} from '../../src/color-ramps/index';
-
-const __filename = fileURLToPath( import.meta.url );
-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;
-
-const transformColorStringToDTCGValue = ( color: string ) => {
-	const parsed = to( parse( color ), sRGB );
-
-	return {
-		colorSpace: 'srgb',
-		components: parsed.coords.map( roundHexComponent ),
-		...( parsed.alpha < 1 ? { alpha: parsed.alpha } : undefined ),
-		hex: serialize( parsed, { format: 'hex' } ),
-	};
-};
-
-// Main function
-function generatePrimitiveColorTokens() {
-	const startTime = performance.now();
-	console.log( '🎨 Starting primitive color tokens generation...' );
-
-	try {
-		// Read the color.json file
-		const colorJson = JSON.parse(
-			fs.readFileSync( colorJsonPath, 'utf8' )
-		);
-
-		// Build the ramps
-		const bgRamp = buildBgRamp( DEFAULT_SEED_COLORS.bg );
-		const accentRamps = [ ...Object.entries( DEFAULT_SEED_COLORS ) ]
-			.filter( ( [ scaleName ] ) => scaleName !== 'bg' )
-			.map( ( [ scaleName, seed ] ) => ( {
-				scaleName,
-				ramp: buildAccentRamp( seed, bgRamp ),
-			} ) );
-
-		// Convert the ramp values in a DTCG compatible format
-		[
-			{
-				scaleName: 'bg',
-				ramp: bgRamp,
-			},
-			...accentRamps,
-		].forEach( ( { scaleName, ramp } ) => {
-			colorJson[ 'wpds-color' ].primitive[ scaleName ] = {};
-			for ( const [ tokenName, tokenValue ] of Object.entries(
-				ramp.ramp
-			) ) {
-				colorJson[ 'wpds-color' ].primitive[ scaleName ][ tokenName ] =
-					{
-						$value: transformColorStringToDTCGValue( tokenValue ),
-					};
-			}
-		} );
-
-		// Write the updated JSON back to the file with proper formatting
-		fs.writeFileSync(
-			colorJsonPath,
-			JSON.stringify( colorJson, null, '\t' )
-		);
-
-		const endTime = performance.now();
-		const duration = endTime - startTime;
-		console.log(
-			`✅ Successfully updated color.json (${ duration.toFixed( 2 ) }ms)`
-		);
-	} catch ( error ) {
-		const endTime = performance.now();
-		const duration = endTime - startTime;
-		console.error(
-			`❌ Error updating color tokens after ${ duration.toFixed(
-				2
-			) }ms:`,
-			error
-		);
-		process.exit( 1 );
-	}
-}
-
-// Run the script
-generatePrimitiveColorTokens();

package/bin/terrazzo-plugin-ds-tokens-docs/index.ts

@@ -1,84 +0,0 @@
-/**
- * External dependencies
- */
-import { FORMAT_ID } from '@terrazzo/plugin-css';
-import type { Plugin } from '@terrazzo/parser';
-
-function titleCase( str: string ) {
-	return str[ 0 ].toUpperCase() + str.slice( 1 );
-}
-
-type TokensMap = Record< string, Record< string, string > >;
-
-export default function pluginDsTokenDocs( {
-	filename = 'design-tokens.md',
-} = {} ): Plugin {
-	return {
-		name: '@terrazzo/terrazzo-plugin-ds-tokens-docs',
-		async build( { getTransforms, outputFile } ) {
-			if ( ! filename ) {
-				return;
-			}
-
-			const semanticTokens: TokensMap = {};
-			// Re-use transformed tokens from the CSS plugin
-			for ( const token of getTransforms( {
-				format: FORMAT_ID,
-				id: '*',
-				mode: '.',
-			} ) ) {
-				if ( token.localID === undefined ) {
-					console.warn(
-						'Unexpected — Missing local ID when building token list for eslint plugin'
-					);
-					continue;
-				}
-
-				// Use the tokens filename (without .json) as the group name
-				const group =
-					token.token.source.loc
-						?.split( '/' )
-						.at( -1 )
-						?.split( '.json' )[ 0 ] ?? 'Miscellaneous';
-
-				// Group by category
-				semanticTokens[ group ] ??= {};
-				semanticTokens[ group ][ token.localID ] =
-					token.token.$description ?? 'N/A';
-			}
-
-			function tokensToMdTable( tokens: TokensMap ) {
-				return Object.entries( tokens )
-					.map( ( [ group, tokensInGroup ] ) => [
-						`### ${ titleCase( group ) }`,
-						'',
-						'| Variable name | Description |',
-						'|---|---|',
-						...Object.entries( tokensInGroup ).map(
-							( [ name, description ] ) =>
-								`| \`${ name }\` | ${ description } |`
-						),
-						'',
-					] )
-					.flat( 2 );
-			}
-
-			outputFile(
-				filename,
-				[
-					'<!--',
-					'This file is generated by @terrazzo/terrazzo-plugin-ds-tokens-docs.',
-					'Do not edit directly.',
-					'-->',
-					'',
-					'# DS Tokens reference',
-					'',
-					'## Semantic tokens',
-					'',
-					...tokensToMdTable( semanticTokens ),
-					'', // final empty line
-				].join( '\n' )
-			);
-		},
-	};
-}

package/bin/terrazzo-plugin-inline-alias-values/index.ts

@@ -1,113 +0,0 @@
-/**
- * External dependencies
- */
-import { type Plugin, type TokenNormalized } from '@terrazzo/parser';
-
-interface InlineAliasValuesOptions {
-	/**
-	 * Output filename for the generated aliased tokens mapping.
-	 */
-	filename?: string;
-
-	/**
-	 * Pattern matching IDs of tokens whose values should be inlined into their alias references.
-	 */
-	pattern: RegExp;
-
-	/**
-	 * Optional function to transform token IDs in the output.
-	 */
-	tokenId?: ( tokenId: string ) => string;
-}
-
-/**
- * Inlines the values of tokens matching the given pattern into their alias
- * references. Matching tokens are removed from the output, and a TypeScript
- * file is emitted with the mapping of aliased tokens.
- *
- * @param options          The options for the plugin.
- * @param options.filename
- * @param options.pattern
- * @param options.tokenId
- */
-export default function inlineAliasValues( {
-	filename,
-	pattern,
-	tokenId = ( id ) => id,
-}: InlineAliasValuesOptions ): Plugin {
-	const aliasedBy: Record< string, string[] > = {};
-
-	return {
-		name: '@wordpress/terrazzo-plugin-inline-alias-values',
-		async transform( { tokens } ) {
-			// Map of primitive token ID -> array of references to inline
-			const inlineMap: Record< string, TokenNormalized[] > = {};
-
-			// Single pass: identify primitives and collect references
-			for ( const [ id, token ] of Object.entries( tokens ) ) {
-				const shouldInline = pattern.test( id );
-
-				if ( shouldInline ) {
-					// Track this token for inlining
-					inlineMap[ id ] = [];
-
-					// Track aliased tokens for output file
-					if ( token.aliasedBy ) {
-						aliasedBy[ tokenId( id ) ] =
-							token.aliasedBy.map( tokenId );
-					}
-				}
-
-				// Check if this token's main value references a primitive
-				if ( token.aliasOf && pattern.test( token.aliasOf ) ) {
-					inlineMap[ token.aliasOf ] ??= [];
-					inlineMap[ token.aliasOf ].push( token );
-				}
-
-				// Check if any mode values reference a primitive
-				for ( const modeValue of Object.values( token.mode ) ) {
-					const { aliasOf } = modeValue;
-					if ( aliasOf && pattern.test( aliasOf ) ) {
-						const primitiveId = aliasOf;
-						inlineMap[ primitiveId ] ??= [];
-						inlineMap[ primitiveId ].push( modeValue );
-					}
-				}
-			}
-
-			// Inline values and delete primitives
-			for ( const [ id, references ] of Object.entries( inlineMap ) ) {
-				const token = tokens[ id ];
-
-				for ( const target of references ) {
-					target.$value = token.$value;
-					target.originalValue = token.originalValue;
-					delete target.aliasOf;
-					delete target.aliasChain;
-				}
-
-				delete tokens[ id ];
-			}
-		},
-		async build( { outputFile } ) {
-			if ( ! filename ) {
-				return;
-			}
-
-			const json = JSON.stringify( aliasedBy, null, 2 );
-
-			outputFile(
-				filename,
-				[
-					'/**',
-					' * This file is generated by the @wordpress/terrazzo-plugin-inline-alias-values plugin.',
-					' * Do not edit this file directly.',
-					' */',
-					'',
-					`export default ${ json } as Record< string, string[] >;`,
-					'',
-				].join( '\n' )
-			);
-		},
-	};
-}

package/bin/terrazzo-plugin-known-wpds-css-variables/index.ts

@@ -1,52 +0,0 @@
-/**
- * External dependencies
- */
-import { FORMAT_ID } from '@terrazzo/plugin-css';
-import type { Plugin } from '@terrazzo/parser';
-
-export default function pluginKnownWpdsCssVariables( {
-	filename = 'design-tokens.js',
-} = {} ): Plugin {
-	return {
-		name: '@terrazzo/plugin-known-wpds-css-variables',
-		async build( { getTransforms, outputFile } ) {
-			// Either a string (modes=false) or an object (modes=true)
-			const tokensToExport: Record<
-				string,
-				Record< string, string | Record< string, string > >
-			> = {};
-
-			for ( const token of getTransforms( {
-				format: FORMAT_ID,
-				id: '*',
-			} ) ) {
-				if ( ! token.localID ) {
-					console.warn(
-						'Unexpected — Missing local ID when building token list for eslint plugin'
-					);
-					continue;
-				}
-
-				tokensToExport[ token.localID ] ??= {};
-				tokensToExport[ token.localID ][ token.mode ] = token.value;
-			}
-
-			outputFile(
-				filename,
-				[
-					'/**',
-					' * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.',
-					' * Do not edit this file directly.',
-					' */',
-					'',
-					`export default ${ JSON.stringify(
-						Array.from( new Set( Object.keys( tokensToExport ) ) ),
-						null,
-						2
-					) }`,
-					'', // final empty line
-				].join( '\n' )
-			);
-		},
-	};
-}