@wordpress/theme 0.3.1-next.6deb34194.0 → 0.4.0

package/README.md

@@ -13,27 +13,91 @@ 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
+### Architecture
 
-The design system defines color tokens using the following naming scheme:
+Internally, the design system uses a tiered token architecture:
+
+- **Primitive tokens**: Raw values like hex colors or pixel dimensions which are what the browsers eventually interpret. These live in the `/tokens` directory as JSON source files and are an internal implementation detail.
+- **Semantic tokens**: Purpose-driven tokens with meaningful names that reference primitives and describe their intended use. These are what get exported as CSS custom properties.
+
+This separation allows the design system to maintain consistency while providing flexibility, since primitive values can be updated without changing the semantic token names that developers use in their code.
+
+### Design Tokens
+
+Design tokens are the visual design atoms of a design system. They are named entities that store visual design attributes like colors, spacing, typography, and shadows. They serve as a single source of truth that bridges design and development, ensuring consistency across platforms and making it easy to maintain and evolve the visual language of an application.
+
+Rather than hardcoding values like `#3858e9` or `16px` throughout your code, tokens provide semantic names like `--wpds-color-bg-interactive-brand-strong` or `--wpds-dimension-padding-surface-md` that describe the purpose and context of the value. This makes code more maintainable and allows the design system to evolve. When a token's value changes, all components using that token automatically reflect the update.
+
+#### Structure
+
+The design system follows the [Design Tokens Community Group (DTCG)](https://design-tokens.github.io/community-group/format/) specification and organizes tokens into distinct types based on what kind of visual property they represent. Token definitions are stored as JSON files in the `/tokens` directory:
+
+| File              | Description                                                                                                                      |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `color.json`      | Color palettes including primitive color ramps and semantic color tokens for backgrounds, foregrounds, strokes, and focus states |
+| `dimension.json`  | Spacing scale and semantic spacing tokens for padding, margins, and sizing                                                       |
+| `typography.json` | Font family stacks, font sizes, and line heights                                                                                 |
+| `border.json`     | Border radius and width values                                                                                                   |
+| `elevation.json`  | Shadow definitions for creating depth and layering                                                                               |
+
+Each JSON file contains both primitive and semantic token definitions in a hierarchical structure. These files are the source of truth for the design system and are processed during the build step to generate CSS custom properties and other output formats in `/src/prebuilt`.
+
+#### Token Naming
+
+Semantic tokens follow a consistent naming pattern:
 
 ```
---wpds-<element>-<tone>[-<emphasis>][-<state>]
+--wpds-<type>-<property>-<target>[-<modifier>]
 ```
 
-**Element** specifies what the color is applied to.
+**Type** indicates what kind of value it represents, usually mapping to a DTCG token type.
 
-| 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.                                                  |
+| Value       | Description                                                                    |
+| ----------- | ------------------------------------------------------------------------------ |
+| `color`     | Color values for backgrounds, foregrounds, and strokes                         |
+| `dimension` | Spacing, sizing, and other measurable lengths (e.g., padding, margins, widths) |
+| `border`    | Border properties like radius and width                                        |
+| `elevation` | Shadow definitions for layering and depth                                      |
+| `font`      | Typography properties like family, size, and line-height                       |
+
+**Property** is the specific design property being defined.
+
+| Value    | Description                        |
+| -------- | ---------------------------------- |
+| `bg`     | Background color                   |
+| `fg`     | Foreground color (text and icons)  |
+| `stroke` | Border and outline color           |
+| `padding`| Internal spacing within an element |
+| `gap`    | Spacing between elements           |
+| `radius` | Border radius for rounded corners  |
+| `width`  | Border width                       |
+| `size`   | Font size                          |
+| `family` | Font family                        |
+
+**Target** is the component or element type the token applies to.
+
+| Value         | Description                                                  |
+| ------------- | ------------------------------------------------------------ |
+| `surface`     | Container or layout backgrounds and borders                  |
+| `interactive` | Interactive elements like buttons, inputs, and controls      |
+| `content`     | Static content like text and icons                           |
+| `track`       | Track components like scrollbars and slider tracks           |
+| `thumb`       | Thumb components like scrollbar thumbs and slider handles    |
+| `focus`       | Focus indicators and rings                                   |
+
+**Modifier** is an optional size or intensity modifier.
+
+| Value                               | Description          |
+| ----------------------------------- | -------------------- |
+| `2xs`, `xs`, `sm`, `md`, `lg`, `xl` | Size scale modifiers |
+
+#### Color Token Modifiers
+
+Color tokens extend the base pattern with additional modifiers for tone, emphasis, and state:
+
+```
+--wpds-color-<property>-<target>-<tone>[-<emphasis>][-<state>]
+```
 
 **Tone** defines the semantic intent of the color.
 
@@ -53,9 +117,9 @@ The design system defines color tokens using the following naming scheme:
 
 **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.   |
+| 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.

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

@@ -4,14 +4,7 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import {
-	parse,
-	to,
-	serialize,
-	OKLCH,
-	sRGB,
-	type PlainColorObject,
-} from 'colorjs.io/fn';
+import { parse, to, serialize, sRGB } from 'colorjs.io/fn';
 
 /**
  * Internal dependencies
@@ -29,29 +22,28 @@ const __dirname = path.dirname( __filename );
 // Path to the color.json file
 const colorJsonPath = path.join( __dirname, '../../tokens/color.json' );
 
-const transformColorStringToDTCGValue = ( color: string ) => {
-	if ( /oklch|p3/.test( color ) ) {
-		let parsed: PlainColorObject;
-		try {
-			parsed = to( parse( color ), OKLCH );
-		} catch {
-			return color;
-		}
+/**
+ * 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 coords = parsed.coords;
-		return {
-			colorSpace: 'oklch',
-			components: [
-				Math.floor( 10000 * coords[ 0 ] ) / 10000, // l
-				coords[ 1 ], // c
-				isNaN( coords[ 2 ] ) ? 0 : coords[ 2 ], // h
-			],
-			...( parsed.alpha < 1 ? { alpha: parsed.alpha } : undefined ),
-			hex: serialize( to( parsed, sRGB ), { format: 'hex' } ),
-		};
-	}
+const transformColorStringToDTCGValue = ( color: string ) => {
+	const parsed = to( parse( color ), sRGB );
 
-	return color;
+	return {
+		colorSpace: 'srgb',
+		components: parsed.coords.map( roundHexComponent ),
+		...( parsed.alpha < 1 ? { alpha: parsed.alpha } : undefined ),
+		hex: serialize( parsed, { format: 'hex' } ),
+	};
 };
 
 // Main function
@@ -82,13 +74,14 @@ function generatePrimitiveColorTokens() {
 			},
 			...accentRamps,
 		].forEach( ( { scaleName, ramp } ) => {
-			colorJson.color.primitive[ scaleName ] = {};
+			colorJson[ 'wpds-color' ].primitive[ scaleName ] = {};
 			for ( const [ tokenName, tokenValue ] of Object.entries(
 				ramp.ramp
 			) ) {
-				colorJson.color.primitive[ scaleName ][ tokenName ] = {
-					$value: transformColorStringToDTCGValue( tokenValue ),
-				};
+				colorJson[ 'wpds-color' ].primitive[ scaleName ][ tokenName ] =
+					{
+						$value: transformColorStringToDTCGValue( tokenValue ),
+					};
 			}
 		} );
 

package/bin/terrazzo-plugin-mode-overrides/index.ts

@@ -0,0 +1,208 @@
+/**
+ * External dependencies
+ */
+import { basename } from 'node:path';
+import type { Plugin } from '@terrazzo/parser';
+
+type DTCGPrimitiveValue =
+	| string
+	| number
+	| boolean
+	| { value: number; unit: string }
+	| { r: number; g: number; b: number; a?: number };
+
+type DTCGValue = DTCGPrimitiveValue | Record< string, DTCGPrimitiveValue >;
+
+interface DTCGExtensions {
+	[ key: string ]: unknown;
+	mode?: Record< string, DTCGValue >;
+}
+
+/**
+ * @see https://tr.designtokens.org/format/
+ */
+interface DTCGToken {
+	$value: DTCGValue;
+	$type?: string;
+	$description?: string;
+	$extensions?: DTCGExtensions;
+}
+
+interface DTCGGroup {
+	$type?: string;
+	$description?: string;
+	$extensions?: DTCGExtensions;
+	[ key: string ]:
+		| DTCGToken
+		| DTCGGroup
+		| string
+		| DTCGExtensions
+		| undefined;
+}
+
+type DTCGDocument = Record< string, DTCGGroup >;
+
+interface ModeOverride {
+	path: string[];
+	$value: DTCGValue;
+	$type?: string;
+}
+
+/**
+ * Type guard to check if a value is a DTCG token (has $value).
+ *
+ * @param value - The value to check.
+ * @return True if the value is a DTCG token.
+ */
+function isDTCGToken( value: DTCGToken | DTCGGroup ): value is DTCGToken {
+	return '$value' in value;
+}
+
+/**
+ * Set a nested value in an object from a path array.
+ *
+ * @param object    - The object to modify.
+ * @param pathParts - The path at which to set the value.
+ * @param value     - The value to set.
+ */
+function setNestedValue(
+	object: Record< string, unknown >,
+	pathParts: string[],
+	value: any
+): void {
+	let current = object;
+
+	for ( let i = 0; i < pathParts.length - 1; i++ ) {
+		const key = pathParts[ i ];
+
+		if ( ! ( key in current ) ) {
+			current[ key ] = {};
+		}
+
+		current = current[ key ] as Record< string, unknown >;
+	}
+
+	current[ pathParts[ pathParts.length - 1 ] ] = value;
+}
+
+/**
+ * Recursively extracts mode overrides from a DTCG token tree.
+ *
+ * @param object      - The DTCG group to extract from.
+ * @param currentPath - The current path in the token tree.
+ * @param currentType - The $type inherited from parent groups.
+ * @return A map of mode names to their token overrides.
+ */
+function getModeOverrides(
+	object: DTCGGroup,
+	currentPath: string[] = [],
+	currentType?: string
+): Map< string, ModeOverride[] > {
+	const modeOverrides = new Map< string, ModeOverride[] >();
+
+	// Check if this group defines a $type that should be inherited by children
+	const groupType = object.$type ?? currentType;
+
+	for ( const [ key, value ] of Object.entries( object ) ) {
+		// Skip DTCG metadata keys
+		if ( key.startsWith( '$' ) ) {
+			continue;
+		}
+
+		const node = value as DTCGToken | DTCGGroup;
+
+		if ( isDTCGToken( node ) ) {
+			// Extract mode-specific values from extensions
+			const modes = node.$extensions?.mode;
+			if ( modes ) {
+				for ( const [ mode, modeValue ] of Object.entries( modes ) ) {
+					modeOverrides.set( mode, [
+						...( modeOverrides.get( mode ) ?? [] ),
+						{
+							path: [ ...currentPath, key ],
+							$value: modeValue,
+							$type: node.$type ?? groupType,
+						},
+					] );
+				}
+			}
+		} else {
+			// Recurse into nested groups, passing down the type
+			const nextPath = [ ...currentPath, key ];
+			const childOverrides = getModeOverrides(
+				node,
+				nextPath,
+				groupType
+			);
+
+			// Merge child results
+			for ( const [ mode, overrides ] of childOverrides ) {
+				modeOverrides.set( mode, [
+					...( modeOverrides.get( mode ) ?? [] ),
+					...overrides,
+				] );
+			}
+		}
+	}
+
+	return modeOverrides;
+}
+
+/**
+ * Terrazzo plugin that generates mode-specific DTCG override files.
+ *
+ * For each mode found in tokens (via $extensions.mode), generates a separate
+ * JSON file per source file containing tokens that have values for that mode.
+ *
+ * @return A Terrazzo plugin that generates mode-specific DTCG override files.
+ */
+export default function pluginModeOverrides(): Plugin {
+	return {
+		name: '@wordpress/terrazzo-plugin-mode-overrides',
+		async build( { outputFile, sources } ) {
+			for ( const { filename, src } of sources ) {
+				if ( ! filename ) {
+					continue;
+				}
+
+				// Parse the source JSON file
+				let document: DTCGDocument;
+				try {
+					document = JSON.parse( src ) as DTCGDocument;
+				} catch ( error ) {
+					throw new Error(
+						`Could not parse ${ filename }\n\n${ error }`
+					);
+				}
+
+				// Extract mode overrides from this file
+				const fileOverrides = getModeOverrides( document );
+
+				// Generate a DTCG file for each mode found in this source file
+				for ( const [ mode, overrides ] of fileOverrides ) {
+					const output: Record< string, unknown > = {};
+
+					for ( const override of overrides ) {
+						const { path, $value, $type } = override;
+						setNestedValue( output, path, { $type, $value } );
+					}
+
+					// Output as {basename}.{mode}.json (e.g., dimension.compact.json)
+					const sourceDir = new URL( './', filename );
+					const outFileName = `${ basename(
+						filename.pathname,
+						'.json'
+					) }.${ mode }.json`;
+					const outFileUrl = new URL(
+						`modes/${ outFileName }`,
+						sourceDir
+					);
+					outputFile(
+						outFileUrl.href,
+						JSON.stringify( output, null, '\t' )
+					);
+				}
+			}
+		},
+	};
+}

package/build/prebuilt/js/design-tokens.js

@@ -64,6 +64,15 @@ var design_tokens_default = [
   "--wpds-color-bg-interactive-brand-weak",
   "--wpds-color-bg-interactive-brand-weak-active",
   "--wpds-color-bg-interactive-brand-weak-disabled",
+  "--wpds-color-bg-interactive-error",
+  "--wpds-color-bg-interactive-error-active",
+  "--wpds-color-bg-interactive-error-disabled",
+  "--wpds-color-bg-interactive-error-strong",
+  "--wpds-color-bg-interactive-error-strong-active",
+  "--wpds-color-bg-interactive-error-strong-disabled",
+  "--wpds-color-bg-interactive-error-weak",
+  "--wpds-color-bg-interactive-error-weak-active",
+  "--wpds-color-bg-interactive-error-weak-disabled",
   "--wpds-color-bg-track-neutral-weak",
   "--wpds-color-bg-track-neutral",
   "--wpds-color-bg-thumb-neutral-weak",
@@ -97,6 +106,12 @@ var design_tokens_default = [
   "--wpds-color-fg-interactive-brand-strong",
   "--wpds-color-fg-interactive-brand-strong-active",
   "--wpds-color-fg-interactive-brand-strong-disabled",
+  "--wpds-color-fg-interactive-error",
+  "--wpds-color-fg-interactive-error-active",
+  "--wpds-color-fg-interactive-error-disabled",
+  "--wpds-color-fg-interactive-error-strong",
+  "--wpds-color-fg-interactive-error-strong-active",
+  "--wpds-color-fg-interactive-error-strong-disabled",
   "--wpds-color-stroke-surface-neutral",
   "--wpds-color-stroke-surface-neutral-weak",
   "--wpds-color-stroke-surface-neutral-strong",
@@ -116,7 +131,8 @@ var design_tokens_default = [
   "--wpds-color-stroke-interactive-neutral-strong",
   "--wpds-color-stroke-interactive-brand",
   "--wpds-color-stroke-interactive-brand-active",
-  "--wpds-color-stroke-interactive-brand-disabled",
+  "--wpds-color-stroke-interactive-error",
+  "--wpds-color-stroke-interactive-error-active",
   "--wpds-color-stroke-interactive-error-strong",
   "--wpds-color-stroke-focus-brand",
   "--wpds-dimension-base",

package/build/prebuilt/js/design-tokens.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/prebuilt/js/design-tokens.js"],
-  "sourcesContent": ["/**\n * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-surface-xs',\n\t'--wpds-border-radius-surface-sm',\n\t'--wpds-border-radius-surface-md',\n\t'--wpds-border-radius-surface-lg',\n\t'--wpds-border-width-surface-xs',\n\t'--wpds-border-width-surface-sm',\n\t'--wpds-border-width-surface-md',\n\t'--wpds-border-width-surface-lg',\n\t'--wpds-border-width-interactive-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral',\n\t'--wpds-color-bg-interactive-neutral-active',\n\t'--wpds-color-bg-interactive-neutral-disabled',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand',\n\t'--wpds-color-bg-interactive-brand-active',\n\t'--wpds-color-bg-interactive-brand-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-strong-disabled',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-brand-weak-disabled',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-brand-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-disabled',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-brand-strong-disabled',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-brand-disabled',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-surface-2xs',\n\t'--wpds-dimension-padding-surface-xs',\n\t'--wpds-dimension-padding-surface-sm',\n\t'--wpds-dimension-padding-surface-md',\n\t'--wpds-dimension-padding-surface-lg',\n\t'--wpds-dimension-gap-2xs',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-elevation-x-small',\n\t'--wpds-elevation-small',\n\t'--wpds-elevation-medium',\n\t'--wpds-elevation-large',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-x-small',\n\t'--wpds-font-size-small',\n\t'--wpds-font-size-medium',\n\t'--wpds-font-size-large',\n\t'--wpds-font-size-x-large',\n\t'--wpds-font-size-2x-large',\n\t'--wpds-font-line-height-x-small',\n\t'--wpds-font-line-height-small',\n\t'--wpds-font-line-height-medium',\n\t'--wpds-font-line-height-large',\n\t'--wpds-font-line-height-x-large',\n\t'--wpds-font-line-height-2x-large',\n];\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
+  "sourcesContent": ["/**\n * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-surface-xs',\n\t'--wpds-border-radius-surface-sm',\n\t'--wpds-border-radius-surface-md',\n\t'--wpds-border-radius-surface-lg',\n\t'--wpds-border-width-surface-xs',\n\t'--wpds-border-width-surface-sm',\n\t'--wpds-border-width-surface-md',\n\t'--wpds-border-width-surface-lg',\n\t'--wpds-border-width-interactive-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral',\n\t'--wpds-color-bg-interactive-neutral-active',\n\t'--wpds-color-bg-interactive-neutral-disabled',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand',\n\t'--wpds-color-bg-interactive-brand-active',\n\t'--wpds-color-bg-interactive-brand-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-strong-disabled',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-brand-weak-disabled',\n\t'--wpds-color-bg-interactive-error',\n\t'--wpds-color-bg-interactive-error-active',\n\t'--wpds-color-bg-interactive-error-disabled',\n\t'--wpds-color-bg-interactive-error-strong',\n\t'--wpds-color-bg-interactive-error-strong-active',\n\t'--wpds-color-bg-interactive-error-strong-disabled',\n\t'--wpds-color-bg-interactive-error-weak',\n\t'--wpds-color-bg-interactive-error-weak-active',\n\t'--wpds-color-bg-interactive-error-weak-disabled',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-brand-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-disabled',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-brand-strong-disabled',\n\t'--wpds-color-fg-interactive-error',\n\t'--wpds-color-fg-interactive-error-active',\n\t'--wpds-color-fg-interactive-error-disabled',\n\t'--wpds-color-fg-interactive-error-strong',\n\t'--wpds-color-fg-interactive-error-strong-active',\n\t'--wpds-color-fg-interactive-error-strong-disabled',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-error',\n\t'--wpds-color-stroke-interactive-error-active',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-surface-2xs',\n\t'--wpds-dimension-padding-surface-xs',\n\t'--wpds-dimension-padding-surface-sm',\n\t'--wpds-dimension-padding-surface-md',\n\t'--wpds-dimension-padding-surface-lg',\n\t'--wpds-dimension-gap-2xs',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-elevation-x-small',\n\t'--wpds-elevation-small',\n\t'--wpds-elevation-medium',\n\t'--wpds-elevation-large',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-x-small',\n\t'--wpds-font-size-small',\n\t'--wpds-font-size-medium',\n\t'--wpds-font-size-large',\n\t'--wpds-font-size-x-large',\n\t'--wpds-font-size-2x-large',\n\t'--wpds-font-line-height-x-small',\n\t'--wpds-font-line-height-small',\n\t'--wpds-font-line-height-medium',\n\t'--wpds-font-line-height-large',\n\t'--wpds-font-line-height-x-large',\n\t'--wpds-font-line-height-2x-large',\n];\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
   "names": []
 }

package/build/prebuilt/ts/color-tokens.js

@@ -25,19 +25,19 @@ module.exports = __toCommonJS(color_tokens_exports);
 var color_tokens_default = {
   "primary-bgFill1": ["bg-interactive-brand-strong"],
   "primary-fgFill": [
-    "fg-interactive-brand-strong-active",
-    "fg-interactive-brand-strong"
+    "fg-interactive-brand-strong",
+    "fg-interactive-brand-strong-active"
   ],
   "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"
+    "fg-interactive-brand",
+    "fg-interactive-brand-active"
   ],
   "primary-stroke3": [
-    "bg-thumb-brand-active",
     "bg-thumb-brand",
+    "bg-thumb-brand-active",
     "stroke-focus-brand",
     "stroke-interactive-brand",
     "stroke-surface-brand-strong"
@@ -63,23 +63,44 @@ var color_tokens_default = {
   "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-bgFill1": ["bg-interactive-error-strong"],
+  "error-fgFill": [
+    "fg-interactive-error-strong",
+    "fg-interactive-error-strong-active"
+  ],
+  "error-bgFill2": ["bg-interactive-error-strong-active"],
+  "error-surface2": [
+    "bg-interactive-error-active",
+    "bg-surface-error-weak"
+  ],
+  "error-surface4": [
+    "bg-interactive-error-weak-active",
+    "bg-surface-error"
+  ],
   "error-fgSurface4": ["fg-content-error"],
-  "error-fgSurface3": ["fg-content-error-weak"],
+  "error-fgSurface3": [
+    "fg-content-error-weak",
+    "fg-interactive-error",
+    "fg-interactive-error-active"
+  ],
   "error-stroke3": [
+    "stroke-interactive-error",
     "stroke-interactive-error-strong",
     "stroke-surface-error-strong"
   ],
+  "error-stroke4": ["stroke-interactive-error-active"],
   "error-stroke1": ["stroke-surface-error"],
   "bg-surface2": ["bg-surface-neutral"],
   "bg-surface6": [
     "bg-interactive-brand-strong-disabled",
+    "bg-interactive-error-strong-disabled",
     "bg-interactive-neutral-strong-disabled"
   ],
   "bg-surface5": [
     "bg-interactive-brand-disabled",
     "bg-interactive-brand-weak-disabled",
+    "bg-interactive-error-disabled",
+    "bg-interactive-error-weak-disabled",
     "bg-interactive-neutral-disabled",
     "bg-interactive-neutral-weak-disabled"
   ],
@@ -90,17 +111,19 @@ var color_tokens_default = {
   "bg-surface3": ["bg-surface-neutral-strong"],
   "bg-fgSurface4": [
     "fg-content-neutral",
-    "fg-interactive-neutral-active",
-    "fg-interactive-neutral"
+    "fg-interactive-neutral",
+    "fg-interactive-neutral-active"
   ],
   "bg-fgSurface3": [
     "fg-content-neutral-weak",
     "fg-interactive-brand-strong-disabled",
+    "fg-interactive-error-strong-disabled",
     "fg-interactive-neutral-strong-disabled",
     "fg-interactive-neutral-weak"
   ],
   "bg-fgSurface2": [
     "fg-interactive-brand-disabled",
+    "fg-interactive-error-disabled",
     "fg-interactive-neutral-disabled",
     "fg-interactive-neutral-weak-disabled"
   ],
@@ -117,7 +140,6 @@ var color_tokens_default = {
   "bg-stroke2": [
     "bg-thumb-brand-disabled",
     "bg-track-neutral",
-    "stroke-interactive-brand-disabled",
     "stroke-interactive-neutral-disabled",
     "stroke-surface-neutral"
   ],
@@ -125,8 +147,8 @@ var color_tokens_default = {
   "bg-bgFillInverted2": ["bg-interactive-neutral-strong-active"],
   "bg-bgFillInverted1": ["bg-interactive-neutral-strong"],
   "bg-fgFillInverted": [
-    "fg-interactive-neutral-strong-active",
-    "fg-interactive-neutral-strong"
+    "fg-interactive-neutral-strong",
+    "fg-interactive-neutral-strong-active"
   ],
   "bg-surface1": ["bg-surface-neutral-weak"],
   "caution-surface2": ["bg-surface-caution-weak"],

package/build/prebuilt/ts/color-tokens.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/prebuilt/ts/color-tokens.ts"],
-  "sourcesContent": ["/**\n * This file is generated by the @wordpress/terrazzo-plugin-inline-alias-values plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'primary-bgFill1': [ 'bg-interactive-brand-strong' ],\n\t'primary-fgFill': [\n\t\t'fg-interactive-brand-strong-active',\n\t\t'fg-interactive-brand-strong',\n\t],\n\t'primary-bgFill2': [ 'bg-interactive-brand-strong-active' ],\n\t'primary-surface2': [ 'bg-interactive-brand-active' ],\n\t'primary-surface4': [ 'bg-interactive-brand-weak-active' ],\n\t'primary-fgSurface3': [\n\t\t'fg-interactive-brand-active',\n\t\t'fg-interactive-brand',\n\t],\n\t'primary-stroke3': [\n\t\t'bg-thumb-brand-active',\n\t\t'bg-thumb-brand',\n\t\t'stroke-focus-brand',\n\t\t'stroke-interactive-brand',\n\t\t'stroke-surface-brand-strong',\n\t],\n\t'primary-stroke4': [ 'stroke-interactive-brand-active' ],\n\t'primary-stroke1': [ 'stroke-surface-brand' ],\n\t'primary-surface1': [ 'bg-surface-brand' ],\n\t'info-surface2': [ 'bg-surface-info-weak' ],\n\t'info-surface4': [ 'bg-surface-info' ],\n\t'info-fgSurface4': [ 'fg-content-info' ],\n\t'info-fgSurface3': [ 'fg-content-info-weak' ],\n\t'info-stroke3': [ 'stroke-surface-info-strong' ],\n\t'info-stroke1': [ 'stroke-surface-info' ],\n\t'success-surface2': [ 'bg-surface-success-weak' ],\n\t'success-surface4': [ 'bg-surface-success' ],\n\t'success-fgSurface4': [ 'fg-content-success' ],\n\t'success-fgSurface3': [ 'fg-content-success-weak' ],\n\t'success-stroke3': [ 'stroke-surface-success-strong' ],\n\t'success-stroke1': [ 'stroke-surface-success' ],\n\t'warning-surface2': [ 'bg-surface-warning-weak' ],\n\t'warning-surface4': [ 'bg-surface-warning' ],\n\t'warning-fgSurface4': [ 'fg-content-warning' ],\n\t'warning-fgSurface3': [ 'fg-content-warning-weak' ],\n\t'warning-stroke3': [ 'stroke-surface-warning-strong' ],\n\t'warning-stroke1': [ 'stroke-surface-warning' ],\n\t'error-surface2': [ 'bg-surface-error-weak' ],\n\t'error-surface4': [ 'bg-surface-error' ],\n\t'error-fgSurface4': [ 'fg-content-error' ],\n\t'error-fgSurface3': [ 'fg-content-error-weak' ],\n\t'error-stroke3': [\n\t\t'stroke-interactive-error-strong',\n\t\t'stroke-surface-error-strong',\n\t],\n\t'error-stroke1': [ 'stroke-surface-error' ],\n\t'bg-surface2': [ 'bg-surface-neutral' ],\n\t'bg-surface6': [\n\t\t'bg-interactive-brand-strong-disabled',\n\t\t'bg-interactive-neutral-strong-disabled',\n\t],\n\t'bg-surface5': [\n\t\t'bg-interactive-brand-disabled',\n\t\t'bg-interactive-brand-weak-disabled',\n\t\t'bg-interactive-neutral-disabled',\n\t\t'bg-interactive-neutral-weak-disabled',\n\t],\n\t'bg-surface4': [\n\t\t'bg-interactive-neutral-active',\n\t\t'bg-interactive-neutral-weak-active',\n\t],\n\t'bg-surface3': [ 'bg-surface-neutral-strong' ],\n\t'bg-fgSurface4': [\n\t\t'fg-content-neutral',\n\t\t'fg-interactive-neutral-active',\n\t\t'fg-interactive-neutral',\n\t],\n\t'bg-fgSurface3': [\n\t\t'fg-content-neutral-weak',\n\t\t'fg-interactive-brand-strong-disabled',\n\t\t'fg-interactive-neutral-strong-disabled',\n\t\t'fg-interactive-neutral-weak',\n\t],\n\t'bg-fgSurface2': [\n\t\t'fg-interactive-brand-disabled',\n\t\t'fg-interactive-neutral-disabled',\n\t\t'fg-interactive-neutral-weak-disabled',\n\t],\n\t'bg-stroke3': [\n\t\t'bg-thumb-neutral-weak',\n\t\t'stroke-interactive-neutral',\n\t\t'stroke-surface-neutral-strong',\n\t],\n\t'bg-stroke4': [\n\t\t'bg-thumb-neutral-weak-active',\n\t\t'stroke-interactive-neutral-active',\n\t\t'stroke-interactive-neutral-strong',\n\t],\n\t'bg-stroke2': [\n\t\t'bg-thumb-brand-disabled',\n\t\t'bg-track-neutral',\n\t\t'stroke-interactive-brand-disabled',\n\t\t'stroke-interactive-neutral-disabled',\n\t\t'stroke-surface-neutral',\n\t],\n\t'bg-stroke1': [ 'bg-track-neutral-weak', 'stroke-surface-neutral-weak' ],\n\t'bg-bgFillInverted2': [ 'bg-interactive-neutral-strong-active' ],\n\t'bg-bgFillInverted1': [ 'bg-interactive-neutral-strong' ],\n\t'bg-fgFillInverted': [\n\t\t'fg-interactive-neutral-strong-active',\n\t\t'fg-interactive-neutral-strong',\n\t],\n\t'bg-surface1': [ 'bg-surface-neutral-weak' ],\n\t'caution-surface2': [ 'bg-surface-caution-weak' ],\n\t'caution-surface4': [ 'bg-surface-caution' ],\n\t'caution-fgSurface4': [ 'fg-content-caution' ],\n\t'caution-fgSurface3': [ 'fg-content-caution-weak' ],\n} as Record< string, string[] >;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * This file is generated by the @wordpress/terrazzo-plugin-inline-alias-values plugin.\n * Do not edit this file directly.\n */\n\nexport default {\n\t'primary-bgFill1': [ 'bg-interactive-brand-strong' ],\n\t'primary-fgFill': [\n\t\t'fg-interactive-brand-strong',\n\t\t'fg-interactive-brand-strong-active',\n\t],\n\t'primary-bgFill2': [ 'bg-interactive-brand-strong-active' ],\n\t'primary-surface2': [ 'bg-interactive-brand-active' ],\n\t'primary-surface4': [ 'bg-interactive-brand-weak-active' ],\n\t'primary-fgSurface3': [\n\t\t'fg-interactive-brand',\n\t\t'fg-interactive-brand-active',\n\t],\n\t'primary-stroke3': [\n\t\t'bg-thumb-brand',\n\t\t'bg-thumb-brand-active',\n\t\t'stroke-focus-brand',\n\t\t'stroke-interactive-brand',\n\t\t'stroke-surface-brand-strong',\n\t],\n\t'primary-stroke4': [ 'stroke-interactive-brand-active' ],\n\t'primary-stroke1': [ 'stroke-surface-brand' ],\n\t'primary-surface1': [ 'bg-surface-brand' ],\n\t'info-surface2': [ 'bg-surface-info-weak' ],\n\t'info-surface4': [ 'bg-surface-info' ],\n\t'info-fgSurface4': [ 'fg-content-info' ],\n\t'info-fgSurface3': [ 'fg-content-info-weak' ],\n\t'info-stroke3': [ 'stroke-surface-info-strong' ],\n\t'info-stroke1': [ 'stroke-surface-info' ],\n\t'success-surface2': [ 'bg-surface-success-weak' ],\n\t'success-surface4': [ 'bg-surface-success' ],\n\t'success-fgSurface4': [ 'fg-content-success' ],\n\t'success-fgSurface3': [ 'fg-content-success-weak' ],\n\t'success-stroke3': [ 'stroke-surface-success-strong' ],\n\t'success-stroke1': [ 'stroke-surface-success' ],\n\t'warning-surface2': [ 'bg-surface-warning-weak' ],\n\t'warning-surface4': [ 'bg-surface-warning' ],\n\t'warning-fgSurface4': [ 'fg-content-warning' ],\n\t'warning-fgSurface3': [ 'fg-content-warning-weak' ],\n\t'warning-stroke3': [ 'stroke-surface-warning-strong' ],\n\t'warning-stroke1': [ 'stroke-surface-warning' ],\n\t'error-bgFill1': [ 'bg-interactive-error-strong' ],\n\t'error-fgFill': [\n\t\t'fg-interactive-error-strong',\n\t\t'fg-interactive-error-strong-active',\n\t],\n\t'error-bgFill2': [ 'bg-interactive-error-strong-active' ],\n\t'error-surface2': [\n\t\t'bg-interactive-error-active',\n\t\t'bg-surface-error-weak',\n\t],\n\t'error-surface4': [\n\t\t'bg-interactive-error-weak-active',\n\t\t'bg-surface-error',\n\t],\n\t'error-fgSurface4': [ 'fg-content-error' ],\n\t'error-fgSurface3': [\n\t\t'fg-content-error-weak',\n\t\t'fg-interactive-error',\n\t\t'fg-interactive-error-active',\n\t],\n\t'error-stroke3': [\n\t\t'stroke-interactive-error',\n\t\t'stroke-interactive-error-strong',\n\t\t'stroke-surface-error-strong',\n\t],\n\t'error-stroke4': [ 'stroke-interactive-error-active' ],\n\t'error-stroke1': [ 'stroke-surface-error' ],\n\t'bg-surface2': [ 'bg-surface-neutral' ],\n\t'bg-surface6': [\n\t\t'bg-interactive-brand-strong-disabled',\n\t\t'bg-interactive-error-strong-disabled',\n\t\t'bg-interactive-neutral-strong-disabled',\n\t],\n\t'bg-surface5': [\n\t\t'bg-interactive-brand-disabled',\n\t\t'bg-interactive-brand-weak-disabled',\n\t\t'bg-interactive-error-disabled',\n\t\t'bg-interactive-error-weak-disabled',\n\t\t'bg-interactive-neutral-disabled',\n\t\t'bg-interactive-neutral-weak-disabled',\n\t],\n\t'bg-surface4': [\n\t\t'bg-interactive-neutral-active',\n\t\t'bg-interactive-neutral-weak-active',\n\t],\n\t'bg-surface3': [ 'bg-surface-neutral-strong' ],\n\t'bg-fgSurface4': [\n\t\t'fg-content-neutral',\n\t\t'fg-interactive-neutral',\n\t\t'fg-interactive-neutral-active',\n\t],\n\t'bg-fgSurface3': [\n\t\t'fg-content-neutral-weak',\n\t\t'fg-interactive-brand-strong-disabled',\n\t\t'fg-interactive-error-strong-disabled',\n\t\t'fg-interactive-neutral-strong-disabled',\n\t\t'fg-interactive-neutral-weak',\n\t],\n\t'bg-fgSurface2': [\n\t\t'fg-interactive-brand-disabled',\n\t\t'fg-interactive-error-disabled',\n\t\t'fg-interactive-neutral-disabled',\n\t\t'fg-interactive-neutral-weak-disabled',\n\t],\n\t'bg-stroke3': [\n\t\t'bg-thumb-neutral-weak',\n\t\t'stroke-interactive-neutral',\n\t\t'stroke-surface-neutral-strong',\n\t],\n\t'bg-stroke4': [\n\t\t'bg-thumb-neutral-weak-active',\n\t\t'stroke-interactive-neutral-active',\n\t\t'stroke-interactive-neutral-strong',\n\t],\n\t'bg-stroke2': [\n\t\t'bg-thumb-brand-disabled',\n\t\t'bg-track-neutral',\n\t\t'stroke-interactive-neutral-disabled',\n\t\t'stroke-surface-neutral',\n\t],\n\t'bg-stroke1': [ 'bg-track-neutral-weak', 'stroke-surface-neutral-weak' ],\n\t'bg-bgFillInverted2': [ 'bg-interactive-neutral-strong-active' ],\n\t'bg-bgFillInverted1': [ 'bg-interactive-neutral-strong' ],\n\t'bg-fgFillInverted': [\n\t\t'fg-interactive-neutral-strong',\n\t\t'fg-interactive-neutral-strong-active',\n\t],\n\t'bg-surface1': [ 'bg-surface-neutral-weak' ],\n\t'caution-surface2': [ 'bg-surface-caution-weak' ],\n\t'caution-surface4': [ 'bg-surface-caution' ],\n\t'caution-fgSurface4': [ 'fg-content-caution' ],\n\t'caution-fgSurface3': [ 'fg-content-caution-weak' ],\n} as Record< string, string[] >;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,IAAO,uBAAQ;AAAA,EACd,mBAAmB,CAAE,6BAA8B;AAAA,EACnD,kBAAkB;AAAA,IACjB;AAAA,IACA;AAAA,EACD;AAAA,EACA,mBAAmB,CAAE,oCAAqC;AAAA,EAC1D,oBAAoB,CAAE,6BAA8B;AAAA,EACpD,oBAAoB,CAAE,kCAAmC;AAAA,EACzD,sBAAsB;AAAA,IACrB;AAAA,IACA;AAAA,EACD;AAAA,EACA,mBAAmB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,mBAAmB,CAAE,iCAAkC;AAAA,EACvD,mBAAmB,CAAE,sBAAuB;AAAA,EAC5C,oBAAoB,CAAE,kBAAmB;AAAA,EACzC,iBAAiB,CAAE,sBAAuB;AAAA,EAC1C,iBAAiB,CAAE,iBAAkB;AAAA,EACrC,mBAAmB,CAAE,iBAAkB;AAAA,EACvC,mBAAmB,CAAE,sBAAuB;AAAA,EAC5C,gBAAgB,CAAE,4BAA6B;AAAA,EAC/C,gBAAgB,CAAE,qBAAsB;AAAA,EACxC,oBAAoB,CAAE,yBAA0B;AAAA,EAChD,oBAAoB,CAAE,oBAAqB;AAAA,EAC3C,sBAAsB,CAAE,oBAAqB;AAAA,EAC7C,sBAAsB,CAAE,yBAA0B;AAAA,EAClD,mBAAmB,CAAE,+BAAgC;AAAA,EACrD,mBAAmB,CAAE,wBAAyB;AAAA,EAC9C,oBAAoB,CAAE,yBAA0B;AAAA,EAChD,oBAAoB,CAAE,oBAAqB;AAAA,EAC3C,sBAAsB,CAAE,oBAAqB;AAAA,EAC7C,sBAAsB,CAAE,yBAA0B;AAAA,EAClD,mBAAmB,CAAE,+BAAgC;AAAA,EACrD,mBAAmB,CAAE,wBAAyB;AAAA,EAC9C,iBAAiB,CAAE,6BAA8B;AAAA,EACjD,gBAAgB;AAAA,IACf;AAAA,IACA;AAAA,EACD;AAAA,EACA,iBAAiB,CAAE,oCAAqC;AAAA,EACxD,kBAAkB;AAAA,IACjB;AAAA,IACA;AAAA,EACD;AAAA,EACA,kBAAkB;AAAA,IACjB;AAAA,IACA;AAAA,EACD;AAAA,EACA,oBAAoB,CAAE,kBAAmB;AAAA,EACzC,oBAAoB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,iBAAiB,CAAE,iCAAkC;AAAA,EACrD,iBAAiB,CAAE,sBAAuB;AAAA,EAC1C,eAAe,CAAE,oBAAqB;AAAA,EACtC,eAAe;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,eAAe;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,eAAe;AAAA,IACd;AAAA,IACA;AAAA,EACD;AAAA,EACA,eAAe,CAAE,2BAA4B;AAAA,EAC7C,iBAAiB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,iBAAiB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,cAAc;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,cAAc;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,cAAc;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EACA,cAAc,CAAE,yBAAyB,6BAA8B;AAAA,EACvE,sBAAsB,CAAE,sCAAuC;AAAA,EAC/D,sBAAsB,CAAE,+BAAgC;AAAA,EACxD,qBAAqB;AAAA,IACpB;AAAA,IACA;AAAA,EACD;AAAA,EACA,eAAe,CAAE,yBAA0B;AAAA,EAC3C,oBAAoB,CAAE,yBAA0B;AAAA,EAChD,oBAAoB,CAAE,oBAAqB;AAAA,EAC3C,sBAAsB,CAAE,oBAAqB;AAAA,EAC7C,sBAAsB,CAAE,yBAA0B;AACnD;",
   "names": []
 }