@wordpress/theme 0.1.0 → 0.2.0

package/README.md

@@ -9,35 +9,95 @@ A theming package that's part of the WordPress Design System. It has two parts:
 
 In the **[Design Tokens Reference](docs/ds-tokens.md)** document there is a complete reference of all available design tokens including colors, spacing, typography, and more.
 
+### Color Tokens
+
+The design system defines color tokens using the following naming scheme:
+
+```
+--wpds-<element>-<tone>[-<emphasis>][-<state>]
+```
+
+**Element** specifies what the color is applied to.
+
+| Value                | Description                                                                                 |
+| -------------------- | ------------------------------------------------------------------------------------------- |
+| `bg-surface`         | Backgrounds of layout or container surfaces.                                                |
+| `bg-interactive`     | Backgrounds of interactive elements such as buttons, inputs, and toggles.                   |
+| `bg-track`           | Backgrounds of track components like scrollbars and slider tracks.                          |
+| `bg-thumb`           | Backgrounds of thumb components like scrollbar thumbs and slider thumbs.                    |
+| `fg-content`         | Foreground color for text and icons in static content.                                      |
+| `fg-interactive`     | Foreground color for text and icons in interactive elements such as links and buttons.      |
+| `stroke-surface`     | Decorative borders and dividers for non-interactive surfaces.                               |
+| `stroke-interactive` | Accessible borders for interactive controls.                                                |
+| `stroke-focus`       | Stroke color specifically for focus rings.                                                  |
+
+**Tone** defines the semantic intent of the color.
+
+| Value     | Description                                                                              |
+| --------- | ---------------------------------------------------------------------------------------- |
+| `neutral` | Neutrally toned UI elements.                                                             |
+| `brand`   | Brand-accented or primary action colors.                                                 |
+| `success` | Positive or completed states.                                                            |
+| `info`    | Informational or system-generated context.                                               |
+| `caution` | Heads-up or low-severity issues; “proceed carefully.”                                    |
+| `warning` | Higher-severity or time-sensitive issues that require user attention but are not errors. |
+| `error`   | Blocking issues, validation failures, or destructive actions.                            |
+
+> [!NOTE]
+> `caution` and `warning` represent two escalation levels of non-error severity.
+> Use **`caution`** for guidance or minor risks, and **`warning`** when the user must act to prevent an error.
+
+**Emphasis** adjusts color strength relative to the base tone, if specified. The default is a normal emphasis.
+
+| Value                | Description                                 |
+| -------------------- | ------------------------------------------- |
+| `strong`             | Higher contrast and/or elevated emphasis.   |
+| `weak`               | Subtle variant for secondary or muted elements. |
+
+**State** represents the interactive state of the element, if specified. The default is an idle state.
+
+| Value      | Description                              |
+| ---------- | ---------------------------------------- |
+| `active`   | Hovered, pressed, or selected state.     |
+| `disabled` | Unavailable or inoperable state.         |
+
 ## Theme Provider
 
-The `ThemeProvider` is a React component that should wrap your application to provide design tokens and theme context to the child UI components.
+The `ThemeProvider` is a React component that should wrap your application to provide design tokens and theme context to the child UI components. It accepts a set of customizable seed values and automatically generates a set of design tokens, which are exposed as CSS custom properties for use throughout the application.
 
 ```tsx
 import { ThemeProvider } from '@wordpress/theme';
 
 function App() {
 	return (
-		<ThemeProvider color={ { scheme: 'light', accent: 'blue' } }>
+		<ThemeProvider color={ { primary: 'blue' } }>
 			{ /* Your app content */ }
 		</ThemeProvider>
 	);
 }
 ```
 
+The `color` prop accepts an object with the following optional properties:
+
+-   `primary`: The primary/accent seed color (default: `'#3858e9'`)
+-   `bg`: The background seed color (default: `'#f8f8f8'`)
+
+Both properties accept any valid CSS color value. The theme system automatically generates appropriate color ramps and determines light/dark mode based on these seed colors.
+
+### Nesting Providers
+
 The provider can be used recursively to override or modify the theme for a specific subtree.
 
 ```tsx
-<ThemeProvider>
-	{ /* system-themed UI components */ }
-	<ThemeProvider color={ { scheme: 'dark' } }>
+<ThemeProvider color={ { bg: 'white' } }>
+	{ /* light-themed UI components */ }
+	<ThemeProvider color={ { bg: '#1e1e1e' } }>
 		{ /* dark-themed UI components */ }
-		<ThemeProvider color={ { scheme: 'light' } }>
-			{ /* light-themed UI components */ }
+		<ThemeProvider color={ { primary: 'red' } }>
+			{ /* dark-themed with red accent */ }
 		</ThemeProvider>
-		{ /* dark-themed UI components */ }
 	</ThemeProvider>
-	{ /* system-themed UI components */ }
+	{ /* light-themed UI components */ }
 </ThemeProvider>
 ```
 

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

@@ -0,0 +1,49 @@
+/**
+ * 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

@@ -4,11 +4,19 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import Color from 'colorjs.io';
+import {
+	parse,
+	to,
+	serialize,
+	OKLCH,
+	sRGB,
+	type PlainColorObject,
+} from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
  */
+import '../../src/color-ramps/lib/register-color-spaces';
 import {
 	DEFAULT_SEED_COLORS,
 	buildBgRamp,
@@ -23,9 +31,9 @@ const colorJsonPath = path.join( __dirname, '../../tokens/color.json' );
 
 const transformColorStringToDTCGValue = ( color: string ) => {
 	if ( /oklch|p3/.test( color ) ) {
-		let parsed: Color;
+		let parsed: PlainColorObject;
 		try {
-			parsed = new Color( color ).to( 'oklch' );
+			parsed = to( parse( color ), OKLCH );
 		} catch {
 			return color;
 		}
@@ -39,7 +47,7 @@ const transformColorStringToDTCGValue = ( color: string ) => {
 				isNaN( coords[ 2 ] ) ? 0 : coords[ 2 ], // h
 			],
 			...( parsed.alpha < 1 ? { alpha: parsed.alpha } : undefined ),
-			hex: parsed.to( 'srgb' ).toString( { format: 'hex' } ),
+			hex: serialize( to( parsed, sRGB ), { format: 'hex' } ),
 		};
 	}
 
@@ -58,15 +66,12 @@ function generatePrimitiveColorTokens() {
 		);
 
 		// Build the ramps
-		const bgRamp = buildBgRamp( { seed: DEFAULT_SEED_COLORS.bg } );
+		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,
-				} ),
+				ramp: buildAccentRamp( seed, bgRamp ),
 			} ) );
 
 		// Convert the ramp values in a DTCG compatible format

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-figma-ds-token-manager/index.ts

@@ -3,11 +3,18 @@
  */
 import type { Plugin, TokenNormalized } from '@terrazzo/parser';
 import { transformCSSValue } from '@terrazzo/token-tools/css';
-import Color from 'colorjs.io';
+import {
+	parse,
+	to,
+	serialize,
+	sRGB,
+	type ColorConstructor,
+} from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
  */
+import '../../src/color-ramps/lib/register-color-spaces';
 import { FORMAT_JSON_ID } from './lib';
 
 function titleCase( str: string ) {
@@ -113,15 +120,15 @@ function transformColorToken(
 
 	// Always convert to hex
 	// (easier to convert to Figma RGB, and includes clamping)
-	let convertedColor: Color;
+	let convertedColor: ColorConstructor;
 	try {
-		convertedColor = new Color( cssColorValue );
+		convertedColor = parse( cssColorValue );
 	} catch {
 		console.warn( 'Unexpected: could not convert token value to Color' );
 		return;
 	}
 
-	return convertedColor.to( 'srgb' ).toString( { format: 'hex' } );
+	return serialize( to( convertedColor, sRGB ), { format: 'hex' } );
 }
 
 export default function pluginFigmaDsTokenManager( {

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

@@ -1,9 +1,6 @@
-"use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,15 +14,9 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/theme/src/color-ramps/index.ts
 var color_ramps_exports = {};
 __export(color_ramps_exports, {
   DEFAULT_SEED_COLORS: () => import_constants2.DEFAULT_SEED_COLORS,
@@ -34,48 +25,39 @@ __export(color_ramps_exports, {
   checkAccessibleCombinations: () => checkAccessibleCombinations
 });
 module.exports = __toCommonJS(color_ramps_exports);
-var import_colorjs = __toESM(require("colorjs.io"));
+var import_fn = require("colorjs.io/fn");
+var import_register_color_spaces = require("./lib/register-color-spaces");
 var import_lib = require("./lib/index");
 var import_utils = require("./lib/utils");
 var import_ramp_configs = require("./lib/ramp-configs");
-var import_cache_utils = require("./lib/cache-utils");
+var import_color_utils = require("./lib/color-utils");
 var import_constants = require("./lib/constants");
 var import_constants2 = require("./lib/constants");
-function buildBgRamp({
-  seed,
-  debug
-}) {
+function buildBgRamp(seed) {
   if (typeof seed !== "string" || seed.trim() === "") {
     throw new Error("Seed color must be a non-empty string");
   }
-  return (0, import_lib.buildRamp)(seed, import_ramp_configs.BG_RAMP_CONFIG, { debug });
+  return (0, import_lib.buildRamp)(seed, import_ramp_configs.BG_RAMP_CONFIG);
 }
-const STEP_TO_PIN = "surface2";
+var STEP_TO_PIN = "surface2";
 function getBgRampInfo(ramp) {
   return {
     mainDirection: ramp.direction,
     pinLightness: {
       stepName: STEP_TO_PIN,
       value: (0, import_utils.clampAccentScaleReferenceLightness)(
-        new import_colorjs.default(ramp.ramp[STEP_TO_PIN].color).oklch.l,
+        (0, import_fn.get)((0, import_fn.parse)(ramp.ramp[STEP_TO_PIN].color), [import_fn.OKLCH, "l"]),
         ramp.direction
       )
     }
   };
 }
-function buildAccentRamp({
-  seed,
-  bgRamp,
-  debug
-}) {
+function buildAccentRamp(seed, bgRamp) {
   if (typeof seed !== "string" || seed.trim() === "") {
     throw new Error("Seed color must be a non-empty string");
   }
   const bgRampInfo = bgRamp ? getBgRampInfo(bgRamp) : void 0;
-  return (0, import_lib.buildRamp)(seed, import_ramp_configs.ACCENT_RAMP_CONFIG, {
-    ...bgRampInfo,
-    debug
-  });
+  return (0, import_lib.buildRamp)(seed, import_ramp_configs.ACCENT_RAMP_CONFIG, bgRampInfo);
 }
 function checkAccessibleCombinations({
   bgRamp,
@@ -86,14 +68,14 @@ function checkAccessibleCombinations({
     import_constants.CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
       for (const bg of bgs) {
         for (const fg of fgs) {
-          const bgColor = new import_colorjs.default(ramp.ramp[bg].color);
-          const fgColor = new import_colorjs.default(ramp.ramp[fg].color);
-          if ((0, import_cache_utils.getCachedContrast)(bgColor, fgColor) < target) {
+          const bgColor = (0, import_fn.parse)(ramp.ramp[bg].color);
+          const fgColor = (0, import_fn.parse)(ramp.ramp[fg].color);
+          if ((0, import_color_utils.getContrast)(bgColor, fgColor) < target) {
             unmetTargets.push({
               bgName: bg,
-              bgColor: bgColor.toString(),
+              bgColor: (0, import_fn.serialize)(bgColor),
               fgName: fg,
-              fgColor: fgColor.toString(),
+              fgColor: (0, import_fn.serialize)(fgColor),
               unmetContrast: target
             });
           }
@@ -105,14 +87,14 @@ function checkAccessibleCombinations({
     import_constants.CONTRAST_COMBINATIONS.forEach(({ bgs, fgs, target }) => {
       for (const bg of bgs) {
         for (const fg of fgs) {
-          const bgColor = new import_colorjs.default(bgRamp.ramp[bg].color);
-          const fgColor = new import_colorjs.default(ramp.ramp[fg].color);
-          if ((0, import_cache_utils.getCachedContrast)(bgColor, fgColor) < target) {
+          const bgColor = (0, import_fn.parse)(bgRamp.ramp[bg].color);
+          const fgColor = (0, import_fn.parse)(ramp.ramp[fg].color);
+          if ((0, import_color_utils.getContrast)(bgColor, fgColor) < target) {
             unmetTargets.push({
               bgName: bg,
-              bgColor: bgColor.toString(),
+              bgColor: (0, import_fn.serialize)(bgColor),
               fgName: fg,
-              fgColor: fgColor.toString(),
+              fgColor: (0, import_fn.serialize)(fgColor),
               unmetContrast: target
             });
           }

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 Color from 'colorjs.io';\n\n/**\n * Internal dependencies\n */\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 { getCachedContrast } from './lib/cache-utils';\nimport { CONTRAST_COMBINATIONS } from './lib/constants';\nexport { DEFAULT_SEED_COLORS } from './lib/constants';\n\n/**\n * Creates a background ramp.\n * @param params\n * @param params.seed\n * @param params.debug\n */\nexport function buildBgRamp( {\n\tseed,\n\tdebug,\n}: {\n\tseed: string;\n\tdebug?: boolean;\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\treturn buildRamp( seed, BG_RAMP_CONFIG, { debug } );\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\tnew Color( 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 params\n * @param params.seed\n * @param params.bgRamp\n * @param params.debug\n */\nexport function buildAccentRamp( {\n\tseed,\n\tbgRamp,\n\tdebug,\n}: {\n\tseed: string;\n\tbgRamp?: InternalRampResult;\n\tdebug?: boolean;\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, {\n\t\t...bgRampInfo,\n\t\tdebug,\n\t} );\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 = new Color( ramp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = new Color( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getCachedContrast( 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: bgColor.toString(),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: fgColor.toString(),\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 = new Color( bgRamp.ramp[ bg ].color );\n\t\t\t\t\tconst fgColor = new Color( ramp.ramp[ fg ].color );\n\t\t\t\t\tif ( getCachedContrast( 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: bgColor.toString(),\n\t\t\t\t\t\t\tfgName: fg,\n\t\t\t\t\t\t\tfgColor: fgColor.toString(),\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,qBAAkB;AAKlB,iBAA0B;AAC1B,mBAAmD;AACnD,0BAAmD;AAMnD,yBAAkC;AAClC,uBAAsC;AACtC,IAAAA,oBAAoC;AAQ7B,SAAS,YAAa;AAAA,EAC5B;AAAA,EACA;AACD,GAGwB;AACvB,MAAK,OAAO,SAAS,YAAY,KAAK,KAAK,MAAM,IAAK;AACrD,UAAM,IAAI,MAAO,uCAAwC;AAAA,EAC1D;AAEA,aAAO,sBAAW,MAAM,oCAAgB,EAAE,MAAM,CAAE;AACnD;AAEA,MAAM,cAAc;AACpB,SAAS,cAAe,MAMtB;AACD,SAAO;AAAA,IACN,eAAe,KAAK;AAAA,IACpB,cAAc;AAAA,MACb,UAAU;AAAA,MACV,WAAO;AAAA,QACN,IAAI,eAAAC,QAAO,KAAK,KAAM,WAAY,EAAE,KAAM,EAAE,MAAM;AAAA,QAClD,KAAK;AAAA,MACN;AAAA,IACD;AAAA,EACD;AACD;AAUO,SAAS,gBAAiB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACD,GAIwB;AACvB,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;AAAA,IAC3C,GAAG;AAAA,IACH;AAAA,EACD,CAAE;AACH;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,UAAU,IAAI,eAAAA,QAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AACjD,gBAAM,UAAU,IAAI,eAAAA,QAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AACjD,kBAAK,sCAAmB,SAAS,OAAQ,IAAI,QAAS;AACrD,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,SAAS,QAAQ,SAAS;AAAA,cAC1B,QAAQ;AAAA,cACR,SAAS,QAAQ,SAAS;AAAA,cAC1B,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,UAAU,IAAI,eAAAA,QAAO,OAAO,KAAM,EAAG,EAAE,KAAM;AACnD,gBAAM,UAAU,IAAI,eAAAA,QAAO,KAAK,KAAM,EAAG,EAAE,KAAM;AACjD,kBAAK,sCAAmB,SAAS,OAAQ,IAAI,QAAS;AACrD,yBAAa,KAAM;AAAA,cAClB,QAAQ;AAAA,cACR,SAAS,QAAQ,SAAS;AAAA,cAC1B,QAAQ;AAAA,cACR,SAAS,QAAQ,SAAS;AAAA,cAC1B,eAAe;AAAA,YAChB,CAAE;AAAA,UACH;AAAA,QACD;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,SAAO;AACR;",
-  "names": ["import_constants", "Color"]
+  "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;",
+  "names": ["import_constants"]
 }