@wordpress/theme 0.1.1-next.2f1c7c01b.0 → 0.2.1-next.16d95556a.0

package/README.md

@@ -1,4 +1,8 @@
-# (Experimental) Theme
+# Theme
+
+<div class="callout callout-alert">
+This package is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
 
 A theming package that's part of the WordPress Design System. It has two parts:
 

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

@@ -87,7 +87,7 @@ function generatePrimitiveColorTokens() {
 				ramp.ramp
 			) ) {
 				colorJson.color.primitive[ scaleName ][ tokenName ] = {
-					$value: transformColorStringToDTCGValue( tokenValue.color ),
+					$value: transformColorStringToDTCGValue( tokenValue ),
 				};
 			}
 		} );

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

@@ -4,10 +4,6 @@
 import { FORMAT_ID } from '@terrazzo/plugin-css';
 import type { Plugin } from '@terrazzo/parser';
 
-function isPrivateToken( token: string ) {
-	return /-private-/i.test( token );
-}
-
 function titleCase( str: string ) {
 	return str[ 0 ].toUpperCase() + str.slice( 1 );
 }
@@ -24,7 +20,6 @@ export default function pluginDsTokenDocs( {
 				return;
 			}
 
-			const primitiveTokens: TokensMap = {};
 			const semanticTokens: TokensMap = {};
 			// Re-use transformed tokens from the CSS plugin
 			for ( const token of getTransforms( {
@@ -46,24 +41,16 @@ export default function pluginDsTokenDocs( {
 						.at( -1 )
 						?.split( '.json' )[ 0 ] ?? 'Miscellaneous';
 
-				// Organize tokens in semantic/private, and group by category.
-				const tokensObject = isPrivateToken( token.localID )
-					? primitiveTokens
-					: semanticTokens;
-				tokensObject[ group ] ??= {};
-				tokensObject[ group ][ token.localID ] =
+				// Group by category
+				semanticTokens[ group ] ??= {};
+				semanticTokens[ group ][ token.localID ] =
 					token.token.$description ?? 'N/A';
 			}
 
-			function tokensToMdTable(
-				tokens: TokensMap,
-				isPrivate: boolean = false
-			) {
+			function tokensToMdTable( tokens: TokensMap ) {
 				return Object.entries( tokens )
 					.map( ( [ group, tokensInGroup ] ) => [
-						`### ${ titleCase( group ) }${
-							isPrivate ? ' (private)' : ''
-						}`,
+						`### ${ titleCase( group ) }`,
 						'',
 						'| Variable name | Description |',
 						'|---|---|',
@@ -89,12 +76,6 @@ export default function pluginDsTokenDocs( {
 					'## Semantic tokens',
 					'',
 					...tokensToMdTable( semanticTokens ),
-					'',
-					'## Primitive tokens',
-					'',
-					'**🚨 Note: These tokens are only private implementation details of the Theme, and should never be referenced / consumed directly in the code.**',
-					'',
-					...tokensToMdTable( primitiveTokens, true ),
 					'', // final empty line
 				].join( '\n' )
 			);

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

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { type Plugin } 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 } ) {
+			Object.keys( tokens )
+				.filter( ( id ) => pattern.test( id ) )
+				.forEach( ( id ) => {
+					const token = tokens[ id ];
+					if ( token.aliasedBy ) {
+						aliasedBy[ tokenId( id ) ] =
+							token.aliasedBy.map( tokenId );
+
+						for ( const aliasedId of token.aliasedBy ) {
+							Object.assign( tokens[ aliasedId ], {
+								$value: token.$value,
+								mode: token.mode,
+								originalValue: token.originalValue,
+							} );
+						}
+					}
+
+					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

@@ -4,12 +4,8 @@
 import { FORMAT_ID } from '@terrazzo/plugin-css';
 import type { Plugin } from '@terrazzo/parser';
 
-function isPrivateToken( token: string ) {
-	return /-private-/i.test( token );
-}
-
 export default function pluginKnownWpdsCssVariables( {
-	exports = [ { filename: 'design-tokens.js', modes: false } ],
+	filename = 'design-tokens.js',
 } = {} ): Plugin {
 	return {
 		name: '@terrazzo/plugin-known-wpds-css-variables',
@@ -31,42 +27,26 @@ export default function pluginKnownWpdsCssVariables( {
 					continue;
 				}
 
-				if ( ! isPrivateToken( token.localID ) ) {
-					tokensToExport[ token.localID ] ??= {};
-
-					tokensToExport[ token.localID ][ token.mode ] = token.value;
-				}
+				tokensToExport[ token.localID ] ??= {};
+				tokensToExport[ token.localID ][ token.mode ] = token.value;
 			}
 
-			const exportsAsArray = ! Array.isArray( exports )
-				? [ exports ]
-				: exports;
-			for ( const { filename, modes } of exportsAsArray ) {
-				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(
-							modes === false
-								? Array.from(
-										new Set( Object.keys( tokensToExport ) )
-								  )
-								: tokensToExport,
-							null,
-							2
-						) }${
-							filename.endsWith( '.ts' ) && modes
-								? ' as Record< string, Record< string, string > >'
-								: ''
-						}`,
-						'', // final empty line
-					].join( '\n' )
-				);
-			}
+			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' )
+			);
 		},
 	};
 }

package/build/color-ramps/index.js

@@ -46,7 +46,7 @@ function getBgRampInfo(ramp) {
     pinLightness: {
       stepName: STEP_TO_PIN,
       value: (0, import_utils.clampAccentScaleReferenceLightness)(
-        (0, import_fn.get)((0, import_fn.parse)(ramp.ramp[STEP_TO_PIN].color), [import_fn.OKLCH, "l"]),
+        (0, import_fn.get)((0, import_fn.parse)(ramp.ramp[STEP_TO_PIN]), [import_fn.OKLCH, "l"]),
         ramp.direction
       )
     }
@@ -68,8 +68,8 @@ function checkAccessibleCombinations({
     import_constants.CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
       for (const bg of bgs) {
         for (const fg of fgs) {
-          const bgColor = (0, import_fn.parse)(ramp.ramp[bg].color);
-          const fgColor = (0, import_fn.parse)(ramp.ramp[fg].color);
+          const bgColor = (0, import_fn.parse)(ramp.ramp[bg]);
+          const fgColor = (0, import_fn.parse)(ramp.ramp[fg]);
           if ((0, import_color_utils.getContrast)(bgColor, fgColor) < target) {
             unmetTargets.push({
               bgName: bg,
@@ -87,8 +87,8 @@ function checkAccessibleCombinations({
     import_constants.CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
       for (const bg of bgs) {
         for (const fg of fgs) {
-          const bgColor = (0, import_fn.parse)(bgRamp.ramp[bg].color);
-          const fgColor = (0, import_fn.parse)(ramp.ramp[fg].color);
+          const bgColor = (0, import_fn.parse)(bgRamp.ramp[bg]);
+          const fgColor = (0, import_fn.parse)(ramp.ramp[fg]);
           if ((0, import_color_utils.getContrast)(bgColor, fgColor) < target) {
             unmetTargets.push({
               bgName: bg,

package/build/color-ramps/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-ramps/index.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, parse, serialize } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './lib/register-color-spaces';\nimport { buildRamp } from './lib/index';\nimport { clampAccentScaleReferenceLightness } from './lib/utils';\nimport { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from './lib/ramp-configs';\nimport type {\n\tRampResult as InternalRampResult,\n\tRampDirection,\n\tRamp,\n} from './lib/types';\nimport { getContrast } from './lib/color-utils';\nimport { CONTRAST_COMBINATIONS } from './lib/constants';\nexport { DEFAULT_SEED_COLORS } from './lib/constants';\n\n/**\n * Creates a background ramp.\n * @param seed The seed color for the background ramp.\n */\nexport function buildBgRamp( seed: string ) {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\treturn buildRamp( seed, BG_RAMP_CONFIG );\n}\n\nconst STEP_TO_PIN = 'surface2';\nfunction getBgRampInfo( ramp: InternalRampResult ): {\n\tmainDirection: RampDirection;\n\tpinLightness: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} {\n\treturn {\n\t\tmainDirection: ramp.direction,\n\t\tpinLightness: {\n\t\t\tstepName: STEP_TO_PIN,\n\t\t\tvalue: clampAccentScaleReferenceLightness(\n\t\t\t\tget( parse( ramp.ramp[ STEP_TO_PIN ].color ), [ OKLCH, 'l' ] ),\n\t\t\t\tramp.direction\n\t\t\t),\n\t\t},\n\t};\n}\n\n/**\n * Creates an accent ramp (ie used by primary, success, info, warning and error\n * ramps).\n * @param seed   The seed color for the accent ramp.\n * @param bgRamp The ramp of the background on which the accent is shown.\n */\nexport function buildAccentRamp(\n\tseed: string,\n\tbgRamp?: InternalRampResult\n): InternalRampResult {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\tconst bgRampInfo = bgRamp ? getBgRampInfo( bgRamp ) : undefined;\n\treturn buildRamp( seed, ACCENT_RAMP_CONFIG, bgRampInfo );\n}\n\n/**\n * Checks that all bg/fg combinations generated by the ramps meet contrast\n * targets.\n * @param params\n * @param params.bgRamp\n * @param params.accentRamps\n */\nexport function checkAccessibleCombinations( {\n\tbgRamp,\n\taccentRamps = [],\n}: {\n\tbgRamp: InternalRampResult;\n\taccentRamps?: InternalRampResult[];\n} ) {\n\tconst unmetTargets: {\n\t\tbgName: keyof Ramp;\n\t\tbgColor: string;\n\t\tfgName: keyof Ramp;\n\t\tfgColor: string;\n\t\tunmetContrast: number;\n\t}[] = [];\n\n\t// Assess combinations within each ramp\n\t[ bgRamp, ...accentRamps ].forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = parse( ramp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: serialize( bgColor ),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: serialize( fgColor ),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\t// Assess each accent ramp's fg color against bg ramp\n\taccentRamps.forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = parse( bgRamp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: serialize( bgColor ),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: serialize( fgColor ),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\n\treturn unmetTargets;\n}\n\nexport type RampResult = InternalRampResult;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA6C;AAK7C,mCAAO;AACP,iBAA0B;AAC1B,mBAAmD;AACnD,0BAAmD;AAMnD,yBAA4B;AAC5B,uBAAsC;AACtC,IAAAA,oBAAoC;AAM7B,SAAS,YAAa,MAAe;AAC3C,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,aAAO,sBAAW,MAAM,kCAAe;AACxC;AAEA,IAAM,cAAc;AACpB,SAAS,cAAe,MAMtB;AACD,SAAO;AAAA,IACN,eAAe,KAAK;AAAA,IACpB,cAAc;AAAA,MACb,UAAU;AAAA,MACV,WAAO;AAAA,YACN,mBAAK,iBAAO,KAAK,KAAM,WAAY,EAAE,KAAM,GAAG,CAAE,iBAAO,GAAI,CAAE;AAAA,QAC7D,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AACD;AAQO,SAAS,gBACf,MACA,QACqB;AACrB,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,QAAM,aAAa,SAAS,cAAe,MAAO,IAAI;AACtD,aAAO,sBAAW,MAAM,wCAAoB,UAAW;AACxD;AASO,SAAS,4BAA6B;AAAA,EAC5C;AAAA,EACA,cAAc,CAAC;AAChB,GAGI;AACH,QAAM,eAMA,CAAC;AAGP,GAAE,QAAQ,GAAG,WAAY,EAAE,QAAS,CAAE,SAAU;AAC/C,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,kBAAK,gCAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,cAAY,QAAS,CAAE,SAAU;AAChC,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,cAAU,iBAAO,OAAO,KAAM,EAAG,EAAE,KAAM;AAC/C,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AAC7C,kBAAK,gCAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { get, OKLCH, parse, serialize } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './lib/register-color-spaces';\nimport { buildRamp } from './lib/index';\nimport { clampAccentScaleReferenceLightness } from './lib/utils';\nimport { BG_RAMP_CONFIG, ACCENT_RAMP_CONFIG } from './lib/ramp-configs';\nimport type {\n\tRampResult as InternalRampResult,\n\tRampDirection,\n\tRamp,\n} from './lib/types';\nimport { getContrast } from './lib/color-utils';\nimport { CONTRAST_COMBINATIONS } from './lib/constants';\nexport { DEFAULT_SEED_COLORS } from './lib/constants';\n\n/**\n * Creates a background ramp.\n * @param seed The seed color for the background ramp.\n */\nexport function buildBgRamp( seed: string ) {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\treturn buildRamp( seed, BG_RAMP_CONFIG );\n}\n\nconst STEP_TO_PIN = 'surface2';\nfunction getBgRampInfo( ramp: InternalRampResult ): {\n\tmainDirection: RampDirection;\n\tpinLightness: {\n\t\tstepName: keyof Ramp;\n\t\tvalue: number;\n\t};\n} {\n\treturn {\n\t\tmainDirection: ramp.direction,\n\t\tpinLightness: {\n\t\t\tstepName: STEP_TO_PIN,\n\t\t\tvalue: clampAccentScaleReferenceLightness(\n\t\t\t\tget( parse( ramp.ramp[ STEP_TO_PIN ] ), [ OKLCH, 'l' ] ),\n\t\t\t\tramp.direction\n\t\t\t),\n\t\t},\n\t};\n}\n\n/**\n * Creates an accent ramp (ie used by primary, success, info, warning and error\n * ramps).\n * @param seed   The seed color for the accent ramp.\n * @param bgRamp The ramp of the background on which the accent is shown.\n */\nexport function buildAccentRamp(\n\tseed: string,\n\tbgRamp?: InternalRampResult\n): InternalRampResult {\n\tif ( typeof seed !== 'string' || seed.trim() === '' ) {\n\t\tthrow new Error( 'Seed color must be a non-empty string' );\n\t}\n\n\tconst bgRampInfo = bgRamp ? getBgRampInfo( bgRamp ) : undefined;\n\treturn buildRamp( seed, ACCENT_RAMP_CONFIG, bgRampInfo );\n}\n\n/**\n * Checks that all bg/fg combinations generated by the ramps meet contrast\n * targets.\n * @param params\n * @param params.bgRamp\n * @param params.accentRamps\n */\nexport function checkAccessibleCombinations( {\n\tbgRamp,\n\taccentRamps = [],\n}: {\n\tbgRamp: InternalRampResult;\n\taccentRamps?: InternalRampResult[];\n} ) {\n\tconst unmetTargets: {\n\t\tbgName: keyof Ramp;\n\t\tbgColor: string;\n\t\tfgName: keyof Ramp;\n\t\tfgColor: string;\n\t\tunmetContrast: number;\n\t}[] = [];\n\n\t// Assess combinations within each ramp\n\t[ bgRamp, ...accentRamps ].forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = parse( ramp.ramp[ bg ] );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ] );\n\t\t\t\t\tif ( getContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: serialize( bgColor ),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: serialize( fgColor ),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\t// Assess each accent ramp's fg color against bg ramp\n\taccentRamps.forEach( ( ramp ) => {\n\t\tCONTRAST_COMBINATIONS.forEach( ( { bgs, fgs, target } ) => {\n\t\t\tfor ( const bg of bgs ) {\n\t\t\t\tfor ( const fg of fgs ) {\n\t\t\t\t\tconst bgColor = parse( bgRamp.ramp[ bg ] );\n\t\t\t\t\tconst fgColor = parse( ramp.ramp[ fg ] );\n\t\t\t\t\tif ( getContrast( bgColor, fgColor ) < target ) {\n\t\t\t\t\t\tunmetTargets.push( {\n\t\t\t\t\t\t\tbgName: bg,\n\t\t\t\t\t\t\tbgColor: serialize( bgColor ),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: serialize( fgColor ),\n\t\t\t\t\t\t\tunmetContrast: target,\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t} );\n\n\treturn unmetTargets;\n}\n\nexport type RampResult = InternalRampResult;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA6C;AAK7C,mCAAO;AACP,iBAA0B;AAC1B,mBAAmD;AACnD,0BAAmD;AAMnD,yBAA4B;AAC5B,uBAAsC;AACtC,IAAAA,oBAAoC;AAM7B,SAAS,YAAa,MAAe;AAC3C,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,aAAO,sBAAW,MAAM,kCAAe;AACxC;AAEA,IAAM,cAAc;AACpB,SAAS,cAAe,MAMtB;AACD,SAAO;AAAA,IACN,eAAe,KAAK;AAAA,IACpB,cAAc;AAAA,MACb,UAAU;AAAA,MACV,WAAO;AAAA,YACN,mBAAK,iBAAO,KAAK,KAAM,WAAY,CAAE,GAAG,CAAE,iBAAO,GAAI,CAAE;AAAA,QACvD,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AACD;AAQO,SAAS,gBACf,MACA,QACqB;AACrB,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,QAAM,aAAa,SAAS,cAAe,MAAO,IAAI;AACtD,aAAO,sBAAW,MAAM,wCAAoB,UAAW;AACxD;AASO,SAAS,4BAA6B;AAAA,EAC5C;AAAA,EACA,cAAc,CAAC;AAChB,GAGI;AACH,QAAM,eAMA,CAAC;AAGP,GAAE,QAAQ,GAAG,WAAY,EAAE,QAAS,CAAE,SAAU;AAC/C,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,CAAE;AACvC,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,CAAE;AACvC,kBAAK,gCAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,cAAY,QAAS,CAAE,SAAU;AAChC,2CAAsB,QAAS,CAAE,EAAE,KAAK,KAAK,OAAO,MAAO;AAC1D,iBAAY,MAAM,KAAM;AACvB,mBAAY,MAAM,KAAM;AACvB,gBAAM,cAAU,iBAAO,OAAO,KAAM,EAAG,CAAE;AACzC,gBAAM,cAAU,iBAAO,KAAK,KAAM,EAAG,CAAE;AACvC,kBAAK,gCAAa,SAAS,OAAQ,IAAI,QAAS;AAC/C,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,QAAQ;AAAA,cACR,aAAS,qBAAW,OAAQ;AAAA,cAC5B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;",
   "names": ["import_constants"]
 }

package/build/color-ramps/lib/constants.js

@@ -22,8 +22,8 @@ __export(constants_exports, {
   ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS: () => ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS,
   BLACK: () => BLACK,
   CONTRAST_COMBINATIONS: () => CONTRAST_COMBINATIONS,
+  CONTRAST_EPSILON: () => CONTRAST_EPSILON,
   DEFAULT_SEED_COLORS: () => DEFAULT_SEED_COLORS,
-  LIGHTNESS_EPSILON: () => LIGHTNESS_EPSILON,
   MAX_BISECTION_ITERATIONS: () => MAX_BISECTION_ITERATIONS,
   UNIVERSAL_CONTRAST_TOPUP: () => UNIVERSAL_CONTRAST_TOPUP,
   WHITE: () => WHITE,
@@ -34,13 +34,13 @@ var import_fn = require("colorjs.io/fn");
 var import_register_color_spaces = require("./register-color-spaces");
 var WHITE = (0, import_fn.to)("white", import_fn.OKLCH);
 var BLACK = (0, import_fn.to)("black", import_fn.OKLCH);
-var UNIVERSAL_CONTRAST_TOPUP = 0.05;
+var UNIVERSAL_CONTRAST_TOPUP = 0.012;
 var WHITE_TEXT_CONTRAST_MARGIN = 3.1;
 var ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {
   lighter: { min: 0.2, max: 0.4 },
   darker: { min: 0.75, max: 0.98 }
 };
-var LIGHTNESS_EPSILON = 4e-3;
+var CONTRAST_EPSILON = 4e-3;
 var MAX_BISECTION_ITERATIONS = 10;
 var CONTRAST_COMBINATIONS = [
   {
@@ -88,8 +88,8 @@ var DEFAULT_SEED_COLORS = {
   ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS,
   BLACK,
   CONTRAST_COMBINATIONS,
+  CONTRAST_EPSILON,
   DEFAULT_SEED_COLORS,
-  LIGHTNESS_EPSILON,
   MAX_BISECTION_ITERATIONS,
   UNIVERSAL_CONTRAST_TOPUP,
   WHITE,

package/build/color-ramps/lib/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/color-ramps/lib/constants.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { to, OKLCH } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport type { Ramp } from './types';\n\nexport const WHITE = to( 'white', OKLCH );\nexport const BLACK = to( 'black', OKLCH );\n\n// Margin added to target contrasts to counter for algorithm approximations\n// and rounding errors.\nexport const UNIVERSAL_CONTRAST_TOPUP = 0.05;\n\n// When enabling \"lighter direction\" bias, this is the amount by which\n// black text contrast needs to be greater than white text contrast.\n// The higher the value, the stronger the preference for white text.\n// The current value has been determined empirically as the highest value\n// that won't cause the algo not to be able to correctly solve all contrasts.\nexport const WHITE_TEXT_CONTRAST_MARGIN = 3.1;\n\n// These values are used as thresholds when trying to match the background\n// ramp's lightness while calculating an accent ramp. They prevent the accent\n// scale from being pinned to lightness values in the middle of the range,\n// which would cause the algorithm to struggle to satisfy the accent scale\n// constraints and therefore produce unexpected results.\nexport const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {\n\tlighter: { min: 0.2, max: 0.4 },\n\tdarker: { min: 0.75, max: 0.98 },\n} as const;\n\n// Lightness precision we aim for. Approximately 1/256, resolution of an 8-bit number.\nexport const LIGHTNESS_EPSILON = 4e-3;\n\nexport const MAX_BISECTION_ITERATIONS = 10;\n\nexport const CONTRAST_COMBINATIONS: {\n\tbgs: ( keyof Ramp )[];\n\tfgs: ( keyof Ramp )[];\n\ttarget: number;\n}[] = [\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'fgSurface3', 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface4', 'surface5' ],\n\t\tfgs: [ 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFill1' ],\n\t\tfgs: [ 'fgFill' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'stroke3' ],\n\t\ttarget: 3,\n\t},\n];\n\n// Used when generating the DTCG tokens and the static color ramps.\nexport const DEFAULT_SEED_COLORS = {\n\tbg: '#f8f8f8',\n\tprimary: '#3858e9',\n\tinfo: '#0090ff',\n\tsuccess: '#4ab866',\n\tcaution: '#f0d149',\n\twarning: '#f0b849',\n\terror: '#cc1818',\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA0B;AAK1B,mCAAO;AAGA,IAAM,YAAQ,cAAI,SAAS,eAAM;AACjC,IAAM,YAAQ,cAAI,SAAS,eAAM;AAIjC,IAAM,2BAA2B;AAOjC,IAAM,6BAA6B;AAOnC,IAAM,yCAAyC;AAAA,EACrD,SAAS,EAAE,KAAK,KAAK,KAAK,IAAI;AAAA,EAC9B,QAAQ,EAAE,KAAK,MAAM,KAAK,KAAK;AAChC;AAGO,IAAM,oBAAoB;AAE1B,IAAM,2BAA2B;AAEjC,IAAM,wBAIP;AAAA,EACL;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,cAAc,YAAa;AAAA,IAClC,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,UAAW;AAAA,IAC9B,KAAK,CAAE,YAAa;AAAA,IACpB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,SAAU;AAAA,IACjB,KAAK,CAAE,QAAS;AAAA,IAChB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,SAAU;AAAA,IACjB,QAAQ;AAAA,EACT;AACD;AAGO,IAAM,sBAAsB;AAAA,EAClC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACR;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { to, OKLCH } from 'colorjs.io/fn';\n\n/**\n * Internal dependencies\n */\nimport './register-color-spaces';\nimport type { Ramp } from './types';\n\nexport const WHITE = to( 'white', OKLCH );\nexport const BLACK = to( 'black', OKLCH );\n\n// Margin added to target contrasts to counter for algorithm approximations and rounding errors.\n// - the `CONTRAST_EPSILON` value is 0.004, so the real contrast can be lower by this amount.\n// - the max contrast between adjacent RGB values is 1.016, so half of the difference (0.008) can be rounding error.\n// - the sum is 0.012: the margin we add to ensure that the target contrast is met after all the rounding.\nexport const UNIVERSAL_CONTRAST_TOPUP = 0.012;\n\n// When enabling \"lighter direction\" bias, this is the amount by which\n// black text contrast needs to be greater than white text contrast.\n// The higher the value, the stronger the preference for white text.\n// The current value has been determined empirically as the highest value\n// that won't cause the algo not to be able to correctly solve all contrasts.\nexport const WHITE_TEXT_CONTRAST_MARGIN = 3.1;\n\n// These values are used as thresholds when trying to match the background\n// ramp's lightness while calculating an accent ramp. They prevent the accent\n// scale from being pinned to lightness values in the middle of the range,\n// which would cause the algorithm to struggle to satisfy the accent scale\n// constraints and therefore produce unexpected results.\nexport const ACCENT_SCALE_BASE_LIGHTNESS_THRESHOLDS = {\n\tlighter: { min: 0.2, max: 0.4 },\n\tdarker: { min: 0.75, max: 0.98 },\n} as const;\n\n// Contrast precision we aim for. Approximately 1/256, resolution of an 8-bit number.\nexport const CONTRAST_EPSILON = 4e-3;\n\nexport const MAX_BISECTION_ITERATIONS = 10;\n\nexport const CONTRAST_COMBINATIONS: {\n\tbgs: ( keyof Ramp )[];\n\tfgs: ( keyof Ramp )[];\n\ttarget: number;\n}[] = [\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'fgSurface3', 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface4', 'surface5' ],\n\t\tfgs: [ 'fgSurface4' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFill1' ],\n\t\tfgs: [ 'fgFill' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'bgFillInverted1' ],\n\t\tfgs: [ 'fgFillInverted' ],\n\t\ttarget: 4.5,\n\t},\n\t{\n\t\tbgs: [ 'surface1', 'surface2', 'surface3' ],\n\t\tfgs: [ 'stroke3' ],\n\t\ttarget: 3,\n\t},\n];\n\n// Used when generating the DTCG tokens and the static color ramps.\nexport const DEFAULT_SEED_COLORS = {\n\tbg: '#f8f8f8',\n\tprimary: '#3858e9',\n\tinfo: '#0090ff',\n\tsuccess: '#4ab866',\n\tcaution: '#f0d149',\n\twarning: '#f0b849',\n\terror: '#cc1818',\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAA0B;AAK1B,mCAAO;AAGA,IAAM,YAAQ,cAAI,SAAS,eAAM;AACjC,IAAM,YAAQ,cAAI,SAAS,eAAM;AAMjC,IAAM,2BAA2B;AAOjC,IAAM,6BAA6B;AAOnC,IAAM,yCAAyC;AAAA,EACrD,SAAS,EAAE,KAAK,KAAK,KAAK,IAAI;AAAA,EAC9B,QAAQ,EAAE,KAAK,MAAM,KAAK,KAAK;AAChC;AAGO,IAAM,mBAAmB;AAEzB,IAAM,2BAA2B;AAEjC,IAAM,wBAIP;AAAA,EACL;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,cAAc,YAAa;AAAA,IAClC,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,UAAW;AAAA,IAC9B,KAAK,CAAE,YAAa;AAAA,IACpB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,SAAU;AAAA,IACjB,KAAK,CAAE,QAAS;AAAA,IAChB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,iBAAkB;AAAA,IACzB,KAAK,CAAE,gBAAiB;AAAA,IACxB,QAAQ;AAAA,EACT;AAAA,EACA;AAAA,IACC,KAAK,CAAE,YAAY,YAAY,UAAW;AAAA,IAC1C,KAAK,CAAE,SAAU;AAAA,IACjB,QAAQ;AAAA,EACT;AACD;AAGO,IAAM,sBAAsB;AAAA,EAClC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACR;",
   "names": []
 }