@wordpress/theme 0.1.1-next.2f1c7c01b.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

@@ -23,7 +23,7 @@ import { useMemo, useContext } from '@wordpress/element';
  */
 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,
@@ -152,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( {
@@ -188,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,

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',