@wordpress/theme 0.4.0 → 0.4.1-next.8fd3f8831.0

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

@@ -1,208 +0,0 @@
-/**
- * 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/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/index.ts"],
-  "sourcesContent": ["// Private APIs.\nexport { privateApis } from './private-apis';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,0BAA4B;",
-  "names": []
-}

package/docs/ds-tokens.md

@@ -1,176 +0,0 @@
-<!--
-This file is generated by @terrazzo/terrazzo-plugin-ds-tokens-docs.
-Do not edit directly.
--->
-
-# DS Tokens reference
-
-## Semantic tokens
-
-### Border
-
-| Variable name                           | Description                     |
-| --------------------------------------- | ------------------------------- |
-| `--wpds-border-radius-surface-xs`       | Extra small radius for surfaces |
-| `--wpds-border-radius-surface-sm`       | Small radius for surfaces       |
-| `--wpds-border-radius-surface-md`       | Medium radius for surfaces      |
-| `--wpds-border-radius-surface-lg`       | Large radius for surfaces       |
-| `--wpds-border-width-surface-xs`        | Extra small width for surfaces  |
-| `--wpds-border-width-surface-sm`        | Small width for surfaces        |
-| `--wpds-border-width-surface-md`        | Medium width for surfaces       |
-| `--wpds-border-width-surface-lg`        | Large width for surfaces        |
-| `--wpds-border-width-interactive-focus` | Border width for focus ring     |
-
-### Color
-
-| Variable name                                         | Description                                                                                                                                 |
-| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--wpds-color-bg-surface-neutral`                     | Background color for surfaces with normal emphasis.                                                                                         |
-| `--wpds-color-bg-surface-neutral-strong`              | Background color for surfaces with strong emphasis.                                                                                         |
-| `--wpds-color-bg-surface-neutral-weak`                | Background color for surfaces with weak emphasis.                                                                                           |
-| `--wpds-color-bg-surface-brand`                       | Background color for surfaces with brand tone and normal emphasis.                                                                          |
-| `--wpds-color-bg-surface-success`                     | Background color for surfaces with success tone and normal emphasis.                                                                        |
-| `--wpds-color-bg-surface-success-weak`                | Background color for surfaces with success tone and weak emphasis.                                                                          |
-| `--wpds-color-bg-surface-info`                        | Background color for surfaces with info tone and normal emphasis.                                                                           |
-| `--wpds-color-bg-surface-info-weak`                   | Background color for surfaces with info tone and weak emphasis.                                                                             |
-| `--wpds-color-bg-surface-warning`                     | Background color for surfaces with warning tone and normal emphasis.                                                                        |
-| `--wpds-color-bg-surface-warning-weak`                | Background color for surfaces with warning tone and weak emphasis.                                                                          |
-| `--wpds-color-bg-surface-caution`                     | Background color for surfaces with caution tone and normal emphasis.                                                                        |
-| `--wpds-color-bg-surface-caution-weak`                | Background color for surfaces with caution tone and weak emphasis.                                                                          |
-| `--wpds-color-bg-surface-error`                       | Background color for surfaces with error tone and normal emphasis.                                                                          |
-| `--wpds-color-bg-surface-error-weak`                  | Background color for surfaces with error tone and weak emphasis.                                                                            |
-| `--wpds-color-bg-interactive-neutral`                 | Background color for interactive elements with neutral tone and normal emphasis.                                                            |
-| `--wpds-color-bg-interactive-neutral-active`          | Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active.                       |
-| `--wpds-color-bg-interactive-neutral-disabled`        | Background color for interactive elements with neutral tone and normal emphasis, in their disabled state.                                   |
-| `--wpds-color-bg-interactive-neutral-strong`          | Background color for interactive elements with neutral tone and strong emphasis.                                                            |
-| `--wpds-color-bg-interactive-neutral-strong-active`   | Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active.                       |
-| `--wpds-color-bg-interactive-neutral-strong-disabled` | Background color for interactive elements with neutral tone and strong emphasis, in their disabled state.                                   |
-| `--wpds-color-bg-interactive-neutral-weak`            | Background color for interactive elements with neutral tone and weak emphasis.                                                              |
-| `--wpds-color-bg-interactive-neutral-weak-active`     | Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active.                         |
-| `--wpds-color-bg-interactive-neutral-weak-disabled`   | Background color for interactive elements with neutral tone and weak emphasis, in their disabled state.                                     |
-| `--wpds-color-bg-interactive-brand`                   | Background color for interactive elements with brand tone and normal emphasis.                                                              |
-| `--wpds-color-bg-interactive-brand-active`            | Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active.                         |
-| `--wpds-color-bg-interactive-brand-disabled`          | Background color for interactive elements with brand tone and normal emphasis, in their disabled state.                                     |
-| `--wpds-color-bg-interactive-brand-strong`            | Background color for interactive elements with brand tone and strong emphasis.                                                              |
-| `--wpds-color-bg-interactive-brand-strong-active`     | Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active.                         |
-| `--wpds-color-bg-interactive-brand-strong-disabled`   | Background color for interactive elements with brand tone and strong emphasis, in their disabled state.                                     |
-| `--wpds-color-bg-interactive-brand-weak`              | Background color for interactive elements with brand tone and weak emphasis.                                                                |
-| `--wpds-color-bg-interactive-brand-weak-active`       | Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active.                           |
-| `--wpds-color-bg-interactive-brand-weak-disabled`     | Background color for interactive elements with brand tone and weak emphasis, in their disabled state.                                       |
-| `--wpds-color-bg-interactive-error`                   | Background color for interactive elements with error tone and normal emphasis.                                                              |
-| `--wpds-color-bg-interactive-error-active`            | Background color for interactive elements with error tone and normal emphasis that are hovered, focused, or active.                         |
-| `--wpds-color-bg-interactive-error-disabled`          | Background color for interactive elements with error tone and normal emphasis, in their disabled state.                                     |
-| `--wpds-color-bg-interactive-error-strong`            | Background color for interactive elements with error tone and strong emphasis.                                                              |
-| `--wpds-color-bg-interactive-error-strong-active`     | Background color for interactive elements with error tone and strong emphasis that are hovered, focused, or active.                         |
-| `--wpds-color-bg-interactive-error-strong-disabled`   | Background color for interactive elements with error tone and strong emphasis, in their disabled state.                                     |
-| `--wpds-color-bg-interactive-error-weak`              | Background color for interactive elements with error tone and weak emphasis.                                                                |
-| `--wpds-color-bg-interactive-error-weak-active`       | Background color for interactive elements with error tone and weak emphasis that are hovered, focused, or active.                           |
-| `--wpds-color-bg-interactive-error-weak-disabled`     | Background color for interactive elements with error tone and weak emphasis, in their disabled state.                                       |
-| `--wpds-color-bg-track-neutral-weak`                  | Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track).                                                    |
-| `--wpds-color-bg-track-neutral`                       | Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track).                                      |
-| `--wpds-color-bg-thumb-neutral-weak`                  | Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb).                                                    |
-| `--wpds-color-bg-thumb-neutral-weak-active`           | Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active.               |
-| `--wpds-color-bg-thumb-brand`                         | Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track).                                      |
-| `--wpds-color-bg-thumb-brand-active`                  | Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. |
-| `--wpds-color-bg-thumb-brand-disabled`                | Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state.             |
-| `--wpds-color-fg-content-neutral`                     | Foreground color for content like text with normal emphasis.                                                                                |
-| `--wpds-color-fg-content-neutral-weak`                | Foreground color for content like text with weak emphasis.                                                                                  |
-| `--wpds-color-fg-content-success`                     | Foreground color for content like text with success tone and normal emphasis.                                                               |
-| `--wpds-color-fg-content-success-weak`                | Foreground color for content like text with success tone and weak emphasis.                                                                 |
-| `--wpds-color-fg-content-info`                        | Foreground color for content like text with info tone and normal emphasis.                                                                  |
-| `--wpds-color-fg-content-info-weak`                   | Foreground color for content like text with info tone and weak emphasis.                                                                    |
-| `--wpds-color-fg-content-warning`                     | Foreground color for content like text with warning tone and normal emphasis.                                                               |
-| `--wpds-color-fg-content-warning-weak`                | Foreground color for content like text with warning tone and weak emphasis.                                                                 |
-| `--wpds-color-fg-content-caution`                     | Foreground color for content like text with caution tone and normal emphasis.                                                               |
-| `--wpds-color-fg-content-caution-weak`                | Foreground color for content like text with caution tone and weak emphasis.                                                                 |
-| `--wpds-color-fg-content-error`                       | Foreground color for content like text with error tone and normal emphasis.                                                                 |
-| `--wpds-color-fg-content-error-weak`                  | Foreground color for content like text with error tone and weak emphasis.                                                                   |
-| `--wpds-color-fg-interactive-neutral`                 | Foreground color for interactive elements with neutral tone and normal emphasis.                                                            |
-| `--wpds-color-fg-interactive-neutral-active`          | Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active.                       |
-| `--wpds-color-fg-interactive-neutral-disabled`        | Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state.                                   |
-| `--wpds-color-fg-interactive-neutral-strong`          | Foreground color for interactive elements with neutral tone and strong emphasis.                                                            |
-| `--wpds-color-fg-interactive-neutral-strong-active`   | Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active.                       |
-| `--wpds-color-fg-interactive-neutral-strong-disabled` | Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state.                                   |
-| `--wpds-color-fg-interactive-neutral-weak`            | Foreground color for interactive elements with neutral tone and weak emphasis.                                                              |
-| `--wpds-color-fg-interactive-neutral-weak-disabled`   | Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state.                                     |
-| `--wpds-color-fg-interactive-brand`                   | Foreground color for interactive elements with brand tone and normal emphasis.                                                              |
-| `--wpds-color-fg-interactive-brand-active`            | Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active.                         |
-| `--wpds-color-fg-interactive-brand-disabled`          | Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state.                                     |
-| `--wpds-color-fg-interactive-brand-strong`            | Foreground color for interactive elements with brand tone and strong emphasis.                                                              |
-| `--wpds-color-fg-interactive-brand-strong-active`     | Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active.                         |
-| `--wpds-color-fg-interactive-brand-strong-disabled`   | Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state.                                     |
-| `--wpds-color-fg-interactive-error`                   | Foreground color for interactive elements with error tone and normal emphasis.                                                              |
-| `--wpds-color-fg-interactive-error-active`            | Foreground color for interactive elements with error tone and normal emphasis that are hovered, focused, or active.                         |
-| `--wpds-color-fg-interactive-error-disabled`          | Foreground color for interactive elements with error tone and normal emphasis, in their disabled state.                                     |
-| `--wpds-color-fg-interactive-error-strong`            | Foreground color for interactive elements with error tone and strong emphasis.                                                              |
-| `--wpds-color-fg-interactive-error-strong-active`     | Foreground color for interactive elements with error tone and strong emphasis that are hovered, focused, or active.                         |
-| `--wpds-color-fg-interactive-error-strong-disabled`   | Foreground color for interactive elements with error tone and strong emphasis, in their disabled state.                                     |
-| `--wpds-color-stroke-surface-neutral`                 | Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis.                                             |
-| `--wpds-color-stroke-surface-neutral-weak`            | Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis.                                               |
-| `--wpds-color-stroke-surface-neutral-strong`          | Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis.                                             |
-| `--wpds-color-stroke-surface-brand`                   | Decorative stroke color used to define brand-toned surface boundaries with normal emphasis.                                                 |
-| `--wpds-color-stroke-surface-brand-strong`            | Decorative stroke color used to define brand-toned surface boundaries with strong emphasis.                                                 |
-| `--wpds-color-stroke-surface-success`                 | Decorative stroke color used to define success-toned surface boundaries with normal emphasis.                                               |
-| `--wpds-color-stroke-surface-success-strong`          | Decorative stroke color used to define success-toned surface boundaries with strong emphasis.                                               |
-| `--wpds-color-stroke-surface-info`                    | Decorative stroke color used to define info-toned surface boundaries with normal emphasis.                                                  |
-| `--wpds-color-stroke-surface-info-strong`             | Decorative stroke color used to define info-toned surface boundaries with strong emphasis.                                                  |
-| `--wpds-color-stroke-surface-warning`                 | Decorative stroke color used to define warning-toned surface boundaries with normal emphasis.                                               |
-| `--wpds-color-stroke-surface-warning-strong`          | Decorative stroke color used to define warning-toned surface boundaries with strong emphasis.                                               |
-| `--wpds-color-stroke-surface-error`                   | Decorative stroke color used to define error-toned surface boundaries with normal emphasis.                                                 |
-| `--wpds-color-stroke-surface-error-strong`            | Decorative stroke color used to define error-toned surface boundaries with strong emphasis.                                                 |
-| `--wpds-color-stroke-interactive-neutral`             | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis.                                                 |
-| `--wpds-color-stroke-interactive-neutral-active`      | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active.            |
-| `--wpds-color-stroke-interactive-neutral-disabled`    | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state.                        |
-| `--wpds-color-stroke-interactive-neutral-strong`      | Accessible stroke color used for interactive neutrally-toned elements with strong emphasis.                                                 |
-| `--wpds-color-stroke-interactive-brand`               | Accessible stroke color used for interactive brand-toned elements with normal emphasis.                                                     |
-| `--wpds-color-stroke-interactive-brand-active`        | Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active.                |
-| `--wpds-color-stroke-interactive-error`               | Accessible stroke color used for interactive error-toned elements with normal emphasis.                                                     |
-| `--wpds-color-stroke-interactive-error-active`        | Accessible stroke color used for interactive error-toned elements with normal emphasis that are hovered, focused, or active.                |
-| `--wpds-color-stroke-interactive-error-strong`        | Accessible stroke color used for interactive error-toned elements with strong emphasis.                                                     |
-| `--wpds-color-stroke-focus-brand`                     | Accessible stroke color applied to focus rings.                                                                                             |
-
-### Dimension
-
-| Variable name                          | Description                         |
-| -------------------------------------- | ----------------------------------- |
-| `--wpds-dimension-base`                | Base dimension unit                 |
-| `--wpds-dimension-padding-surface-2xs` | 2x extra small spacing for surfaces |
-| `--wpds-dimension-padding-surface-xs`  | Extra small spacing for surfaces    |
-| `--wpds-dimension-padding-surface-sm`  | Small spacing for surfaces          |
-| `--wpds-dimension-padding-surface-md`  | Medium spacing for surfaces         |
-| `--wpds-dimension-padding-surface-lg`  | Large spacing for surfaces          |
-| `--wpds-dimension-gap-2xs`             | 2x extra small gap                  |
-| `--wpds-dimension-gap-xs`              | Extra small gap                     |
-| `--wpds-dimension-gap-sm`              | Small gap                           |
-| `--wpds-dimension-gap-md`              | Medium gap                          |
-| `--wpds-dimension-gap-lg`              | Large gap                           |
-| `--wpds-dimension-gap-xl`              | Extra large gap                     |
-
-### Elevation
-
-| Variable name              | Description                                                                                                                       |
-| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
-| `--wpds-elevation-x-small` | For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.     |
-| `--wpds-elevation-small`   | For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar. |
-| `--wpds-elevation-medium`  | For components that offer additional actions. Example: Menus, Command Palette                                                     |
-| `--wpds-elevation-large`   | For components that confirm decisions or handle necessary interruptions. Example: Modals.                                         |
-
-### Typography
-
-| Variable name                      | Description             |
-| ---------------------------------- | ----------------------- |
-| `--wpds-font-family-heading`       | Headings font family    |
-| `--wpds-font-family-body`          | Body font family        |
-| `--wpds-font-family-mono`          | Monospace font family   |
-| `--wpds-font-size-x-small`         | Extra small font size   |
-| `--wpds-font-size-small`           | Small font size         |
-| `--wpds-font-size-medium`          | Medium font size        |
-| `--wpds-font-size-large`           | Large font size         |
-| `--wpds-font-size-x-large`         | Extra large font size   |
-| `--wpds-font-size-2x-large`        | 2X large font size      |
-| `--wpds-font-line-height-x-small`  | Extra small line height |
-| `--wpds-font-line-height-small`    | Small line height       |
-| `--wpds-font-line-height-medium`   | Medium line height      |
-| `--wpds-font-line-height-large`    | Large line height       |
-| `--wpds-font-line-height-x-large`  | Extra large line height |
-| `--wpds-font-line-height-2x-large` | 2X large line height    |

package/terrazzo.config.ts

@@ -1,123 +0,0 @@
-/**
- * External dependencies
- */
-import { defineConfig } from '@terrazzo/cli';
-import pluginCSS from '@terrazzo/plugin-css';
-import { makeCSSVar } from '@terrazzo/token-tools/css';
-
-/**
- * Internal dependencies
- */
-import pluginModeOverrides from './bin/terrazzo-plugin-mode-overrides/index';
-import pluginKnownWpdsCssVariables from './bin/terrazzo-plugin-known-wpds-css-variables/index';
-import pluginDsTokenDocs from './bin/terrazzo-plugin-ds-tokens-docs/index';
-import inlineAliasValues from './bin/terrazzo-plugin-inline-alias-values/index';
-
-export default defineConfig( {
-	tokens: [
-		'./tokens/border.json',
-		'./tokens/color.json',
-		'./tokens/dimension.json',
-		'./tokens/elevation.json',
-		'./tokens/typography.json',
-	],
-	outDir: './src/prebuilt',
-
-	plugins: [
-		inlineAliasValues( {
-			pattern: /^wpds-color\.primitive\./,
-			filename: 'ts/color-tokens.ts',
-			tokenId: ( tokenId ) =>
-				tokenId
-					.replace( /\.primitive/, '' )
-					.replace( /^wpds-color\./, '' )
-					.replace( /\./g, '-' ),
-		} ),
-		inlineAliasValues( { pattern: /^wpds-dimension\.primitive\./ } ),
-		pluginCSS( {
-			filename: 'css/design-tokens.css',
-			variableName: ( token ) => makeCSSVar( token.id ),
-			baseSelector: ':root',
-			modeSelectors: [
-				{
-					tokens: [ 'wpds-dimension.*' ],
-					mode: '.',
-					selectors: [
-						"[data-wpds-theme-provider-id][data-wpds-density='default']",
-					],
-				},
-				{
-					tokens: [ 'wpds-dimension.*' ],
-					mode: 'compact',
-					selectors: [
-						"[data-wpds-theme-provider-id][data-wpds-density='compact']",
-					],
-				},
-				{
-					tokens: [ 'wpds-dimension.*' ],
-					mode: 'comfortable',
-					selectors: [
-						"[data-wpds-theme-provider-id][data-wpds-density='comfortable']",
-					],
-				},
-				{
-					mode: 'high-dpi',
-					selectors: [
-						'@media ( -webkit-min-device-pixel-ratio: 2 ), ( min-resolution: 192dpi )',
-					],
-				},
-			],
-			legacyHex: true,
-		} ),
-		pluginKnownWpdsCssVariables( {
-			filename: 'js/design-tokens.js',
-		} ),
-		pluginDsTokenDocs( {
-			filename: '../../docs/ds-tokens.md',
-		} ),
-		pluginModeOverrides(),
-	],
-
-	// Linter rules current error when multiple entry files are used
-	// See https://github.com/terrazzoapp/terrazzo/issues/505
-	// lint: {
-	// 	rules: {
-	// 		'a11y/min-contrast': [
-	// 			'error',
-	// 			{
-	// 				level: 'AA',
-	// 				pairs: [
-	// 					// Standard BG / FG pairs
-	// 					...[
-	// 						'color.primitive.neutral.1',
-	// 						'color.primitive.neutral.2',
-	// 						'color.primitive.neutral.3',
-	// 						'color.primitive.primary.1',
-	// 						'color.primitive.primary.2',
-	// 						'color.primitive.primary.3',
-	// 					].flatMap( ( bgToken ) =>
-	// 						[
-	// 							'color.primitive.neutral.11',
-	// 							'color.primitive.neutral.12',
-	// 							'color.primitive.primary.11',
-	// 							'color.primitive.primary.12',
-	// 						].map( ( fgToken ) => ( {
-	// 							foreground: fgToken,
-	// 							background: bgToken,
-	// 						} ) )
-	// 					),
-	// 					// Action pairs (ie. using step 9 as background)
-	// 					{
-	// 						foreground: 'color.primitive.primary.contrast',
-	// 						background: 'color.primitive.primary.9',
-	// 					},
-	// 					{
-	// 						foreground: 'color.primitive.primary.1',
-	// 						background: 'color.primitive.primary.9',
-	// 					},
-	// 				],
-	// 			},
-	// 		],
-	// 	},
-	// },
-} );

package/tokens/border.json

@@ -1,56 +0,0 @@
-{
-	"wpds-border": {
-		"$type": "dimension",
-		"radius": {
-			"surface": {
-				"xs": {
-					"$value": { "value": 1, "unit": "px" },
-					"$description": "Extra small radius for surfaces"
-				},
-				"sm": {
-					"$value": { "value": 2, "unit": "px" },
-					"$description": "Small radius for surfaces"
-				},
-				"md": {
-					"$value": { "value": 4, "unit": "px" },
-					"$description": "Medium radius for surfaces"
-				},
-				"lg": {
-					"$value": { "value": 8, "unit": "px" },
-					"$description": "Large radius for surfaces"
-				}
-			}
-		},
-		"width": {
-			"surface": {
-				"xs": {
-					"$value": { "value": 1, "unit": "px" },
-					"$description": "Extra small width for surfaces"
-				},
-				"sm": {
-					"$value": { "value": 2, "unit": "px" },
-					"$description": "Small width for surfaces"
-				},
-				"md": {
-					"$value": { "value": 4, "unit": "px" },
-					"$description": "Medium width for surfaces"
-				},
-				"lg": {
-					"$value": { "value": 8, "unit": "px" },
-					"$description": "Large width for surfaces"
-				}
-			},
-			"interactive": {
-				"focus": {
-					"$value": { "value": 2, "unit": "px" },
-					"$description": "Border width for focus ring",
-					"$extensions": {
-						"mode": {
-							"high-dpi": { "value": 1.5, "unit": "px" }
-						}
-					}
-				}
-			}
-		}
-	}
-}