@wordpress/theme 0.1.0 → 0.2.0

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

@@ -0,0 +1,117 @@
+/**
+ * This file is generated by the @wordpress/terrazzo-plugin-inline-alias-values plugin.
+ * Do not edit this file directly.
+ */
+
+export default {
+	'primary-bgFill1': [ 'bg-interactive-brand-strong' ],
+	'primary-fgFill': [
+		'fg-interactive-brand-strong-active',
+		'fg-interactive-brand-strong',
+	],
+	'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',
+	],
+	'primary-stroke3': [
+		'bg-thumb-brand-active',
+		'bg-thumb-brand',
+		'stroke-focus-brand',
+		'stroke-interactive-brand',
+		'stroke-surface-brand-strong',
+	],
+	'primary-stroke4': [ 'stroke-interactive-brand-active' ],
+	'primary-stroke1': [ 'stroke-surface-brand' ],
+	'primary-surface1': [ 'bg-surface-brand' ],
+	'info-surface2': [ 'bg-surface-info-weak' ],
+	'info-surface4': [ 'bg-surface-info' ],
+	'info-fgSurface4': [ 'fg-content-info' ],
+	'info-fgSurface3': [ 'fg-content-info-weak' ],
+	'info-stroke3': [ 'stroke-surface-info-strong' ],
+	'info-stroke1': [ 'stroke-surface-info' ],
+	'success-surface2': [ 'bg-surface-success-weak' ],
+	'success-surface4': [ 'bg-surface-success' ],
+	'success-fgSurface4': [ 'fg-content-success' ],
+	'success-fgSurface3': [ 'fg-content-success-weak' ],
+	'success-stroke3': [ 'stroke-surface-success-strong' ],
+	'success-stroke1': [ 'stroke-surface-success' ],
+	'warning-surface2': [ 'bg-surface-warning-weak' ],
+	'warning-surface4': [ 'bg-surface-warning' ],
+	'warning-fgSurface4': [ 'fg-content-warning' ],
+	'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-fgSurface4': [ 'fg-content-error' ],
+	'error-fgSurface3': [ 'fg-content-error-weak' ],
+	'error-stroke3': [
+		'stroke-interactive-error-strong',
+		'stroke-surface-error-strong',
+	],
+	'error-stroke1': [ 'stroke-surface-error' ],
+	'bg-surface2': [ 'bg-surface-neutral' ],
+	'bg-surface6': [
+		'bg-interactive-brand-strong-disabled',
+		'bg-interactive-neutral-strong-disabled',
+	],
+	'bg-surface5': [
+		'bg-interactive-brand-disabled',
+		'bg-interactive-brand-weak-disabled',
+		'bg-interactive-neutral-disabled',
+		'bg-interactive-neutral-weak-disabled',
+	],
+	'bg-surface4': [
+		'bg-interactive-neutral-active',
+		'bg-interactive-neutral-weak-active',
+	],
+	'bg-surface3': [ 'bg-surface-neutral-strong' ],
+	'bg-fgSurface4': [
+		'fg-content-neutral',
+		'fg-interactive-neutral-active',
+		'fg-interactive-neutral',
+	],
+	'bg-fgSurface3': [
+		'fg-content-neutral-weak',
+		'fg-interactive-brand-strong-disabled',
+		'fg-interactive-neutral-strong-disabled',
+		'fg-interactive-neutral-weak',
+	],
+	'bg-fgSurface2': [
+		'fg-interactive-brand-disabled',
+		'fg-interactive-neutral-disabled',
+		'fg-interactive-neutral-weak-disabled',
+	],
+	'bg-stroke3': [
+		'bg-thumb-neutral-weak',
+		'stroke-interactive-neutral',
+		'stroke-surface-neutral-strong',
+	],
+	'bg-stroke4': [
+		'bg-thumb-neutral-weak-active',
+		'stroke-interactive-neutral-active',
+		'stroke-interactive-neutral-strong',
+	],
+	'bg-stroke2': [
+		'bg-thumb-brand-disabled',
+		'bg-track-neutral',
+		'stroke-interactive-brand-disabled',
+		'stroke-interactive-neutral-disabled',
+		'stroke-surface-neutral',
+	],
+	'bg-stroke1': [ 'bg-track-neutral-weak', 'stroke-surface-neutral-weak' ],
+	'bg-bgFillInverted2': [ 'bg-interactive-neutral-strong-active' ],
+	'bg-bgFillInverted1': [ 'bg-interactive-neutral-strong' ],
+	'bg-fgFillInverted': [
+		'fg-interactive-neutral-strong-active',
+		'fg-interactive-neutral-strong',
+	],
+	'bg-surface1': [ 'bg-surface-neutral-weak' ],
+	'caution-surface2': [ 'bg-surface-caution-weak' ],
+	'caution-surface4': [ 'bg-surface-caution' ],
+	'caution-fgSurface4': [ 'fg-content-caution' ],
+	'caution-fgSurface3': [ 'fg-content-caution-weak' ],
+} as Record< string, string[] >;

package/src/stories/index.story.tsx

@@ -39,7 +39,6 @@ const meta: Meta< typeof ThemeProvider > = {
 export default meta;
 
 function getCSSCustomPropsFromStylesheets() {
-	const primitiveProps: Record< string, string > = {};
 	const semanticProps: Record< string, string > = {};
 	const legacyProps: Record< string, string > = {};
 
@@ -58,15 +57,9 @@ function getCSSCustomPropsFromStylesheets() {
 								.trim();
 						}
 						if ( name.startsWith( '--wpds-color' ) ) {
-							if ( name.includes( 'private' ) ) {
-								primitiveProps[ name ] = ruleStyle
-									.getPropertyValue( name )
-									.trim();
-							} else {
-								semanticProps[ name ] = ruleStyle
-									.getPropertyValue( name )
-									.trim();
-							}
+							semanticProps[ name ] = ruleStyle
+								.getPropertyValue( name )
+								.trim();
 						}
 					}
 				}
@@ -79,7 +72,7 @@ function getCSSCustomPropsFromStylesheets() {
 		}
 	}
 
-	return { primitiveProps, semanticProps, legacyProps };
+	return { semanticProps, legacyProps };
 }
 
 const ColorTokenTable = ( {
@@ -126,11 +119,9 @@ const ColorTokenTable = ( {
 const DSTokensList = () => {
 	const [ props, setProps ] = useState< {
 		semanticProps: Record< string, string >;
-		primitiveProps: Record< string, string >;
 		legacyProps: Record< string, string >;
 	} >( {
 		semanticProps: {},
-		primitiveProps: {},
 		legacyProps: {},
 	} );
 
@@ -143,11 +134,6 @@ const DSTokensList = () => {
 			<h1>DS Color tokens</h1>
 			<h2>Semantic tokens (can be consumed directly)</h2>
 			<ColorTokenTable tokens={ props.semanticProps } />
-			<h2>Primitive tokens (should not be consumed directly)</h2>
-			<details>
-				<summary>Click to expand</summary>
-				<ColorTokenTable tokens={ props.primitiveProps } />
-			</details>
 			<h2>Legacy tokens (should not be consumed directly)</h2>
 			<details>
 				<summary>Click to expand</summary>

package/src/test/token-id.test.ts

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import { publicTokenId } from '../token-id';
+
+describe( 'publicTokenId', () => {
+	it( 'should remove default states and visibility identifiers from the token id', () => {
+		expect(
+			publicTokenId( 'color.semantic.bg-surface.success.weak.resting' )
+		).toBe( 'color.bg-surface.success.weak' );
+	} );
+} );

package/src/token-id.ts

@@ -0,0 +1,9 @@
+/**
+ * Normalizes a token ID by removing default states and visibility identifiers,
+ * making it human-readable as a publicly-accessible variable name.
+ *
+ * @param id The token ID to normalize.
+ * @return The normalized token ID.
+ */
+export const publicTokenId = ( id: string ) =>
+	id.replace( /\.(normal|resting|semantic|primitive)/g, '' );

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

@@ -2,7 +2,16 @@
  * External dependencies
  */
 import type { CSSProperties } from 'react';
-import Color from 'colorjs.io';
+import {
+	parse,
+	to,
+	get,
+	serialize,
+	sRGB,
+	HSL,
+	type ColorTypes,
+} from 'colorjs.io/fn';
+import memoize from 'memize';
 
 /**
  * WordPress dependencies
@@ -12,8 +21,9 @@ import { useMemo, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import './color-ramps/lib/register-color-spaces';
 import { ThemeContext } from './context';
-import semanticVariables from './prebuilt/ts/design-tokens';
+import colorTokens from './prebuilt/ts/color-tokens';
 import {
 	buildBgRamp,
 	buildAccentRamp,
@@ -24,6 +34,9 @@ import type { ThemeProviderProps } from './types';
 
 type Entry = [ string, string ];
 
+const getCachedBgRamp = memoize( buildBgRamp, { maxSize: 10 } );
+const getCachedAccentRamp = memoize( buildAccentRamp, { maxSize: 10 } );
+
 const legacyWpComponentsOverridesCSS: Entry[] = [
 	[ '--wp-components-color-accent', 'var(--wp-admin-theme-color)' ],
 	[
@@ -80,37 +93,49 @@ const legacyWpComponentsOverridesCSS: Entry[] = [
 	],
 ];
 
-function customRgbFormat( color: Color ) {
-	const rgb = color.to( 'srgb' );
-	return [ rgb.r, rgb.g, rgb.b ]
+function customRgbFormat( color: ColorTypes ) {
+	const rgb = to( color, sRGB );
+	return [ get( rgb, 'srgb.r' ), get( rgb, 'srgb.g' ), get( rgb, 'srgb.b' ) ]
 		.map( ( n ) => Math.round( n * 255 ) )
 		.join( ', ' );
 }
 
 function legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {
-	const parsedAccent = new Color( accent ).to( 'hsl' );
-
-	const hsl = parsedAccent.coords;
-	const darker10 = new Color( 'hsl', [
-		hsl[ 0 ], // h
-		hsl[ 1 ], // s
-		Math.max( 0, Math.min( 100, hsl[ 2 ] - 5 ) ), // l (reduced by 5%)
-	] ).to( 'srgb' );
-	const darker20 = new Color( 'hsl', [
-		hsl[ 0 ], // h
-		hsl[ 1 ], // s
-		Math.max( 0, Math.min( 100, hsl[ 2 ] - 10 ) ), // l (reduced by 10%)
-	] ).to( 'srgb' );
+	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 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
+	);
 
 	return [
 		[
 			'--wp-admin-theme-color',
-			parsedAccent.to( 'srgb' ).toString( { format: 'hex' } ),
+			serialize( to( parsedAccent, sRGB ), { format: 'hex' } ),
 		],
 		[ '--wp-admin-theme-color--rgb', customRgbFormat( parsedAccent ) ],
 		[
 			'--wp-admin-theme-color-darker-10',
-			darker10.toString( { format: 'hex' } ),
+			serialize( darker10, { format: 'hex' } ),
 		],
 		[
 			'--wp-admin-theme-color-darker-10--rgb',
@@ -118,7 +143,7 @@ function legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {
 		],
 		[
 			'--wp-admin-theme-color-darker-20',
-			darker20.toString( { format: 'hex' } ),
+			serialize( darker20, { format: 'hex' } ),
 		],
 		[
 			'--wp-admin-theme-color-darker-20--rgb',
@@ -127,31 +152,25 @@ function legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] {
 	];
 }
 
-function semanticTokensCSS(
-	filterFn: ( entry: [ string, Record< string, string > ] ) => boolean = () =>
-		true
+function colorTokensCSS(
+	computedColorRamps: Map< string, RampResult >
 ): Entry[] {
-	return Object.entries( semanticVariables )
-		.filter( filterFn )
-		.map( ( [ variableName, modesAndValues ] ) => [
-			variableName,
-			modesAndValues[ '.' ],
-		] );
-}
-
-const toKebabCase = ( str: string ) =>
-	str.replace(
-		/[A-Z]+(?![a-z])|[A-Z]/g,
-		( $, ofs ) => ( ofs ? '-' : '' ) + $.toLowerCase()
-	);
+	const entries: Entry[] = [];
+
+	for ( const [ rampName, { ramp } ] of computedColorRamps ) {
+		for ( const [ tokenName, tokenValue ] of Object.entries( ramp ) ) {
+			const key = `${ rampName }-${ tokenName }`;
+			const aliasedBy = colorTokens[ key ] ?? [];
+			for ( const aliasedId of aliasedBy ) {
+				entries.push( [
+					`--wpds-color-${ aliasedId }`,
+					tokenValue.color,
+				] );
+			}
+		}
+	}
 
-function colorRampCSS( ramp: RampResult, prefix: string ): Entry[] {
-	return [ ...Object.entries( ramp.ramp ) ].map(
-		( [ tokenName, tokenValue ] ) => [
-			`${ prefix }${ toKebabCase( tokenName ) }`,
-			tokenValue.color,
-		]
-	);
+	return entries;
 }
 
 function generateStyles( {
@@ -163,17 +182,8 @@ function generateStyles( {
 } ): CSSProperties {
 	return Object.fromEntries(
 		[
-			// Primitive tokens
-			Array.from( computedColorRamps )
-				.map( ( [ rampName, computedColorRamp ] ) => [
-					colorRampCSS(
-						computedColorRamp,
-						`--wpds-color-private-${ rampName }-`
-					),
-				] )
-				.flat( 2 ),
-			// Semantic color tokens (other semantic tokens for now are static)
-			semanticTokensCSS( ( [ key ] ) => /color/.test( key ) ),
+			// Semantic color tokens
+			colorTokensCSS( computedColorRamps ),
 			// Legacy overrides
 			legacyWpAdminThemeOverridesCSS( primary ),
 			legacyWpComponentsOverridesCSS,
@@ -219,17 +229,14 @@ export function useThemeProviderStyles( {
 
 		// Generate ramps.
 		const computedColorRamps = new Map< string, RampResult >();
-		const bgRamp = buildBgRamp( { seed: seeds.bg } );
+		const bgRamp = getCachedBgRamp( seeds.bg );
 		Object.entries( seeds ).forEach( ( [ rampName, seed ] ) => {
 			if ( rampName === 'bg' ) {
 				computedColorRamps.set( rampName, bgRamp );
 			} else {
 				computedColorRamps.set(
 					rampName,
-					buildAccentRamp( {
-						seed,
-						bgRamp,
-					} )
+					getCachedAccentRamp( seed, bgRamp )
 				);
 			}
 		} );

package/terrazzo.config.ts

@@ -4,34 +4,40 @@
 import { defineConfig } from '@terrazzo/cli';
 import pluginCSS from '@terrazzo/plugin-css';
 import { makeCSSVar } from '@terrazzo/token-tools/css';
+
 /**
  * Internal dependencies
  */
 import pluginFigmaDsTokenManager from './bin/terrazzo-plugin-figma-ds-token-manager/index';
 import pluginKnownWpdsCssVariables from './bin/terrazzo-plugin-known-wpds-css-variables/index';
 import pluginDsTokenDocs from './bin/terrazzo-plugin-ds-tokens-docs/index';
+import inlineAliasValues from './bin/terrazzo-plugin-inline-alias-values/index';
+import { publicTokenId } from './src/token-id.ts';
 
 export default defineConfig( {
 	tokens: [
 		'./tokens/border.json',
 		'./tokens/color.json',
+		'./tokens/dimension.json',
 		'./tokens/elevation.json',
-		'./tokens/spacing.json',
 		'./tokens/typography.json',
 	],
 	outDir: './src/prebuilt',
 
 	plugins: [
+		inlineAliasValues( {
+			pattern: /^color\.primitive\./,
+			filename: 'ts/color-tokens.ts',
+			tokenId: ( tokenId ) =>
+				publicTokenId( tokenId )
+					.replace( /^color\./, '' )
+					.replace( /\./g, '-' ),
+		} ),
+		inlineAliasValues( { pattern: /^dimension\.primitive\./ } ),
 		pluginCSS( {
 			filename: 'css/design-tokens.css',
 			variableName: ( token ) =>
-				makeCSSVar(
-					`wpds.${ token.id
-						.replace( /normal/g, '' )
-						.replace( /resting/g, '' )
-						.replace( /primitive/g, 'private' )
-						.replace( /semantic/g, '' ) }`
-				),
+				makeCSSVar( `wpds.${ publicTokenId( token.id ) }` ),
 			baseSelector: ':root',
 			modeSelectors: [
 				{
@@ -47,10 +53,7 @@ export default defineConfig( {
 			filename: 'json/figma.json',
 		} ),
 		pluginKnownWpdsCssVariables( {
-			exports: [
-				{ filename: 'js/design-tokens.js', modes: false },
-				{ filename: 'ts/design-tokens.ts', modes: true },
-			],
+			filename: 'js/design-tokens.js',
 		} ),
 		pluginDsTokenDocs( {
 			filename: '../../docs/ds-tokens.md',