diff --git a/packages/theme/bin/terrazzo-plugin-ds-tokens-docs/index.ts b/packages/theme/bin/terrazzo-plugin-ds-tokens-docs/index.ts index 04982e3f12a3eb..3a3450d86ac5ab 100644 --- a/packages/theme/bin/terrazzo-plugin-ds-tokens-docs/index.ts +++ b/packages/theme/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' ) ); diff --git a/packages/theme/bin/terrazzo-plugin-inline-alias-values/index.ts b/packages/theme/bin/terrazzo-plugin-inline-alias-values/index.ts new file mode 100644 index 00000000000000..12d145013a4092 --- /dev/null +++ b/packages/theme/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' ) + ); + }, + }; +} diff --git a/packages/theme/bin/terrazzo-plugin-known-wpds-css-variables/index.ts b/packages/theme/bin/terrazzo-plugin-known-wpds-css-variables/index.ts index 00095bae096d05..9db44e95500a34 100644 --- a/packages/theme/bin/terrazzo-plugin-known-wpds-css-variables/index.ts +++ b/packages/theme/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' ) + ); }, }; } diff --git a/packages/theme/docs/ds-tokens.md b/packages/theme/docs/ds-tokens.md index e925354333465e..9148ba1bea01fa 100644 --- a/packages/theme/docs/ds-tokens.md +++ b/packages/theme/docs/ds-tokens.md @@ -147,181 +147,3 @@ Do not edit directly. | `--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 | - -## Primitive tokens - -**🚨 Note: These tokens are only private implementation details of the Theme, and should never be referenced / consumed directly in the code.** - -### Color (private) - -| Variable name | Description | -| ------------------------------------------------ | ----------- | -| `--wpds-color-private-primary-bg-fill1` | N/A | -| `--wpds-color-private-primary-fg-fill` | N/A | -| `--wpds-color-private-primary-bg-fill2` | N/A | -| `--wpds-color-private-primary-surface2` | N/A | -| `--wpds-color-private-primary-surface6` | N/A | -| `--wpds-color-private-primary-surface5` | N/A | -| `--wpds-color-private-primary-surface4` | N/A | -| `--wpds-color-private-primary-surface3` | N/A | -| `--wpds-color-private-primary-fg-surface4` | N/A | -| `--wpds-color-private-primary-fg-surface3` | N/A | -| `--wpds-color-private-primary-fg-surface2` | N/A | -| `--wpds-color-private-primary-fg-surface1` | N/A | -| `--wpds-color-private-primary-stroke3` | N/A | -| `--wpds-color-private-primary-stroke4` | N/A | -| `--wpds-color-private-primary-stroke2` | N/A | -| `--wpds-color-private-primary-stroke1` | N/A | -| `--wpds-color-private-primary-bg-fill-dark` | N/A | -| `--wpds-color-private-primary-fg-fill-dark` | N/A | -| `--wpds-color-private-primary-bg-fill-inverted2` | N/A | -| `--wpds-color-private-primary-bg-fill-inverted1` | N/A | -| `--wpds-color-private-primary-fg-fill-inverted` | N/A | -| `--wpds-color-private-primary-surface1` | N/A | -| `--wpds-color-private-info-bg-fill1` | N/A | -| `--wpds-color-private-info-fg-fill` | N/A | -| `--wpds-color-private-info-bg-fill2` | N/A | -| `--wpds-color-private-info-surface2` | N/A | -| `--wpds-color-private-info-surface6` | N/A | -| `--wpds-color-private-info-surface5` | N/A | -| `--wpds-color-private-info-surface4` | N/A | -| `--wpds-color-private-info-surface3` | N/A | -| `--wpds-color-private-info-fg-surface4` | N/A | -| `--wpds-color-private-info-fg-surface3` | N/A | -| `--wpds-color-private-info-fg-surface2` | N/A | -| `--wpds-color-private-info-fg-surface1` | N/A | -| `--wpds-color-private-info-stroke3` | N/A | -| `--wpds-color-private-info-stroke4` | N/A | -| `--wpds-color-private-info-stroke2` | N/A | -| `--wpds-color-private-info-stroke1` | N/A | -| `--wpds-color-private-info-bg-fill-dark` | N/A | -| `--wpds-color-private-info-fg-fill-dark` | N/A | -| `--wpds-color-private-info-bg-fill-inverted2` | N/A | -| `--wpds-color-private-info-bg-fill-inverted1` | N/A | -| `--wpds-color-private-info-fg-fill-inverted` | N/A | -| `--wpds-color-private-info-surface1` | N/A | -| `--wpds-color-private-success-bg-fill1` | N/A | -| `--wpds-color-private-success-fg-fill` | N/A | -| `--wpds-color-private-success-bg-fill2` | N/A | -| `--wpds-color-private-success-surface2` | N/A | -| `--wpds-color-private-success-surface6` | N/A | -| `--wpds-color-private-success-surface5` | N/A | -| `--wpds-color-private-success-surface4` | N/A | -| `--wpds-color-private-success-surface3` | N/A | -| `--wpds-color-private-success-fg-surface4` | N/A | -| `--wpds-color-private-success-fg-surface3` | N/A | -| `--wpds-color-private-success-fg-surface2` | N/A | -| `--wpds-color-private-success-fg-surface1` | N/A | -| `--wpds-color-private-success-stroke3` | N/A | -| `--wpds-color-private-success-stroke4` | N/A | -| `--wpds-color-private-success-stroke2` | N/A | -| `--wpds-color-private-success-stroke1` | N/A | -| `--wpds-color-private-success-bg-fill-dark` | N/A | -| `--wpds-color-private-success-fg-fill-dark` | N/A | -| `--wpds-color-private-success-bg-fill-inverted2` | N/A | -| `--wpds-color-private-success-bg-fill-inverted1` | N/A | -| `--wpds-color-private-success-fg-fill-inverted` | N/A | -| `--wpds-color-private-success-surface1` | N/A | -| `--wpds-color-private-warning-bg-fill1` | N/A | -| `--wpds-color-private-warning-fg-fill` | N/A | -| `--wpds-color-private-warning-bg-fill2` | N/A | -| `--wpds-color-private-warning-surface2` | N/A | -| `--wpds-color-private-warning-surface6` | N/A | -| `--wpds-color-private-warning-surface5` | N/A | -| `--wpds-color-private-warning-surface4` | N/A | -| `--wpds-color-private-warning-surface3` | N/A | -| `--wpds-color-private-warning-fg-surface4` | N/A | -| `--wpds-color-private-warning-fg-surface3` | N/A | -| `--wpds-color-private-warning-fg-surface2` | N/A | -| `--wpds-color-private-warning-fg-surface1` | N/A | -| `--wpds-color-private-warning-stroke3` | N/A | -| `--wpds-color-private-warning-stroke4` | N/A | -| `--wpds-color-private-warning-stroke2` | N/A | -| `--wpds-color-private-warning-stroke1` | N/A | -| `--wpds-color-private-warning-bg-fill-dark` | N/A | -| `--wpds-color-private-warning-fg-fill-dark` | N/A | -| `--wpds-color-private-warning-bg-fill-inverted2` | N/A | -| `--wpds-color-private-warning-bg-fill-inverted1` | N/A | -| `--wpds-color-private-warning-fg-fill-inverted` | N/A | -| `--wpds-color-private-warning-surface1` | N/A | -| `--wpds-color-private-error-bg-fill1` | N/A | -| `--wpds-color-private-error-fg-fill` | N/A | -| `--wpds-color-private-error-bg-fill2` | N/A | -| `--wpds-color-private-error-surface2` | N/A | -| `--wpds-color-private-error-surface6` | N/A | -| `--wpds-color-private-error-surface5` | N/A | -| `--wpds-color-private-error-surface4` | N/A | -| `--wpds-color-private-error-surface3` | N/A | -| `--wpds-color-private-error-fg-surface4` | N/A | -| `--wpds-color-private-error-fg-surface3` | N/A | -| `--wpds-color-private-error-fg-surface2` | N/A | -| `--wpds-color-private-error-fg-surface1` | N/A | -| `--wpds-color-private-error-stroke3` | N/A | -| `--wpds-color-private-error-stroke4` | N/A | -| `--wpds-color-private-error-stroke2` | N/A | -| `--wpds-color-private-error-stroke1` | N/A | -| `--wpds-color-private-error-bg-fill-dark` | N/A | -| `--wpds-color-private-error-fg-fill-dark` | N/A | -| `--wpds-color-private-error-bg-fill-inverted2` | N/A | -| `--wpds-color-private-error-bg-fill-inverted1` | N/A | -| `--wpds-color-private-error-fg-fill-inverted` | N/A | -| `--wpds-color-private-error-surface1` | N/A | -| `--wpds-color-private-bg-surface2` | N/A | -| `--wpds-color-private-bg-bg-fill1` | N/A | -| `--wpds-color-private-bg-fg-fill` | N/A | -| `--wpds-color-private-bg-bg-fill2` | N/A | -| `--wpds-color-private-bg-surface6` | N/A | -| `--wpds-color-private-bg-surface5` | N/A | -| `--wpds-color-private-bg-surface4` | N/A | -| `--wpds-color-private-bg-surface3` | N/A | -| `--wpds-color-private-bg-fg-surface4` | N/A | -| `--wpds-color-private-bg-fg-surface3` | N/A | -| `--wpds-color-private-bg-fg-surface2` | N/A | -| `--wpds-color-private-bg-fg-surface1` | N/A | -| `--wpds-color-private-bg-stroke3` | N/A | -| `--wpds-color-private-bg-stroke4` | N/A | -| `--wpds-color-private-bg-stroke2` | N/A | -| `--wpds-color-private-bg-stroke1` | N/A | -| `--wpds-color-private-bg-bg-fill-dark` | N/A | -| `--wpds-color-private-bg-fg-fill-dark` | N/A | -| `--wpds-color-private-bg-bg-fill-inverted2` | N/A | -| `--wpds-color-private-bg-bg-fill-inverted1` | N/A | -| `--wpds-color-private-bg-fg-fill-inverted` | N/A | -| `--wpds-color-private-bg-surface1` | N/A | -| `--wpds-color-private-caution-bg-fill1` | N/A | -| `--wpds-color-private-caution-fg-fill` | N/A | -| `--wpds-color-private-caution-bg-fill2` | N/A | -| `--wpds-color-private-caution-surface2` | N/A | -| `--wpds-color-private-caution-surface6` | N/A | -| `--wpds-color-private-caution-surface5` | N/A | -| `--wpds-color-private-caution-surface4` | N/A | -| `--wpds-color-private-caution-surface3` | N/A | -| `--wpds-color-private-caution-fg-surface4` | N/A | -| `--wpds-color-private-caution-fg-surface3` | N/A | -| `--wpds-color-private-caution-fg-surface2` | N/A | -| `--wpds-color-private-caution-fg-surface1` | N/A | -| `--wpds-color-private-caution-stroke3` | N/A | -| `--wpds-color-private-caution-stroke4` | N/A | -| `--wpds-color-private-caution-stroke2` | N/A | -| `--wpds-color-private-caution-stroke1` | N/A | -| `--wpds-color-private-caution-bg-fill-dark` | N/A | -| `--wpds-color-private-caution-fg-fill-dark` | N/A | -| `--wpds-color-private-caution-bg-fill-inverted2` | N/A | -| `--wpds-color-private-caution-bg-fill-inverted1` | N/A | -| `--wpds-color-private-caution-fg-fill-inverted` | N/A | -| `--wpds-color-private-caution-surface1` | N/A | - -### Dimension (private) - -| Variable name | Description | -| ----------------------------------- | ---------------- | -| `--wpds-dimension-private-space-0` | Empty space | -| `--wpds-dimension-private-space-10` | 1x base spacing | -| `--wpds-dimension-private-space-20` | 2x base spacing | -| `--wpds-dimension-private-space-30` | 3x base spacing | -| `--wpds-dimension-private-space-40` | 4x base spacing | -| `--wpds-dimension-private-space-50` | 5x base spacing | -| `--wpds-dimension-private-space-60` | 6x base spacing | -| `--wpds-dimension-private-space-70` | 8x base spacing | -| `--wpds-dimension-private-space-80` | 10x base spacing | -| `--wpds-dimension-private-space-90` | 12x base spacing | diff --git a/packages/theme/src/prebuilt/css/design-tokens.css b/packages/theme/src/prebuilt/css/design-tokens.css index 0c630367d0d09f..5ab429a29b7acd 100644 --- a/packages/theme/src/prebuilt/css/design-tokens.css +++ b/packages/theme/src/prebuilt/css/design-tokens.css @@ -9,437 +9,97 @@ --wpds-border-radius-x-small: 1px; /* Extra small radius */ --wpds-border-width-focus: 2px; /* Border width for focus ring */ --wpds-color-bg-interactive-brand: #00000000; /* Background color for interactive elements with brand tone and normal emphasis. */ - --wpds-color-bg-interactive-brand-active: var( - --wpds-color-private-primary-surface2 - ); /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */ - --wpds-color-bg-interactive-brand-disabled: var( - --wpds-color-private-bg-surface5 - ); /* Background color for interactive elements with brand tone and normal emphasis, in their disabled state. */ - --wpds-color-bg-interactive-brand-strong: var( - --wpds-color-private-primary-bg-fill1 - ); /* Background color for interactive elements with brand tone and strong emphasis. */ - --wpds-color-bg-interactive-brand-strong-active: var( - --wpds-color-private-primary-bg-fill2 - ); /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */ - --wpds-color-bg-interactive-brand-strong-disabled: var( - --wpds-color-private-bg-surface6 - ); /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */ + --wpds-color-bg-interactive-brand-active: #f6f8fc; /* Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */ + --wpds-color-bg-interactive-brand-disabled: #e0e0e0; /* Background color for interactive elements with brand tone and normal emphasis, in their disabled state. */ + --wpds-color-bg-interactive-brand-strong: #3858e9; /* Background color for interactive elements with brand tone and strong emphasis. */ + --wpds-color-bg-interactive-brand-strong-active: #2c47d7; /* Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */ + --wpds-color-bg-interactive-brand-strong-disabled: #d0d0d0; /* Background color for interactive elements with brand tone and strong emphasis, in their disabled state. */ --wpds-color-bg-interactive-brand-weak: #00000000; /* Background color for interactive elements with brand tone and weak emphasis. */ - --wpds-color-bg-interactive-brand-weak-active: var( - --wpds-color-private-primary-surface4 - ); /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */ - --wpds-color-bg-interactive-brand-weak-disabled: var( - --wpds-color-private-bg-surface5 - ); /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */ + --wpds-color-bg-interactive-brand-weak-active: #e6ebf7; /* Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. */ + --wpds-color-bg-interactive-brand-weak-disabled: #e0e0e0; /* Background color for interactive elements with brand tone and weak emphasis, in their disabled state. */ --wpds-color-bg-interactive-neutral: #00000000; /* Background color for interactive elements with neutral tone and normal emphasis. */ - --wpds-color-bg-interactive-neutral-active: var( - --wpds-color-private-bg-surface4 - ); /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */ - --wpds-color-bg-interactive-neutral-disabled: var( - --wpds-color-private-bg-surface5 - ); /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */ - --wpds-color-bg-interactive-neutral-strong: var( - --wpds-color-private-bg-bg-fill-inverted1 - ); /* Background color for interactive elements with neutral tone and strong emphasis. */ - --wpds-color-bg-interactive-neutral-strong-active: var( - --wpds-color-private-bg-bg-fill-inverted2 - ); /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */ - --wpds-color-bg-interactive-neutral-strong-disabled: var( - --wpds-color-private-bg-surface6 - ); /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */ + --wpds-color-bg-interactive-neutral-active: #ebebeb; /* Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */ + --wpds-color-bg-interactive-neutral-disabled: #e0e0e0; /* Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. */ + --wpds-color-bg-interactive-neutral-strong: #2f2f2f; /* Background color for interactive elements with neutral tone and strong emphasis. */ + --wpds-color-bg-interactive-neutral-strong-active: #1e1e1e; /* Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */ + --wpds-color-bg-interactive-neutral-strong-disabled: #d0d0d0; /* Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. */ --wpds-color-bg-interactive-neutral-weak: #00000000; /* Background color for interactive elements with neutral tone and weak emphasis. */ - --wpds-color-bg-interactive-neutral-weak-active: var( - --wpds-color-private-bg-surface4 - ); /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */ - --wpds-color-bg-interactive-neutral-weak-disabled: var( - --wpds-color-private-bg-surface5 - ); /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */ - --wpds-color-bg-surface-brand: var( - --wpds-color-private-primary-surface1 - ); /* Background color for surfaces with brand tone and normal emphasis. */ - --wpds-color-bg-surface-caution: var( - --wpds-color-private-caution-surface4 - ); /* Background color for surfaces with caution tone and normal emphasis. */ - --wpds-color-bg-surface-caution-weak: var( - --wpds-color-private-caution-surface2 - ); /* Background color for surfaces with caution tone and weak emphasis. */ - --wpds-color-bg-surface-error: var( - --wpds-color-private-error-surface4 - ); /* Background color for surfaces with error tone and normal emphasis. */ - --wpds-color-bg-surface-error-weak: var( - --wpds-color-private-error-surface2 - ); /* Background color for surfaces with error tone and weak emphasis. */ - --wpds-color-bg-surface-info: var( - --wpds-color-private-info-surface4 - ); /* Background color for surfaces with info tone and normal emphasis. */ - --wpds-color-bg-surface-info-weak: var( - --wpds-color-private-info-surface2 - ); /* Background color for surfaces with info tone and weak emphasis. */ - --wpds-color-bg-surface-neutral: var( - --wpds-color-private-bg-surface2 - ); /* Background color for surfaces with normal emphasis. */ - --wpds-color-bg-surface-neutral-strong: var( - --wpds-color-private-bg-surface3 - ); /* Background color for surfaces with strong emphasis. */ - --wpds-color-bg-surface-neutral-weak: var( - --wpds-color-private-bg-surface1 - ); /* Background color for surfaces with weak emphasis. */ - --wpds-color-bg-surface-success: var( - --wpds-color-private-success-surface4 - ); /* Background color for surfaces with success tone and normal emphasis. */ - --wpds-color-bg-surface-success-weak: var( - --wpds-color-private-success-surface2 - ); /* Background color for surfaces with success tone and weak emphasis. */ - --wpds-color-bg-surface-warning: var( - --wpds-color-private-warning-surface4 - ); /* Background color for surfaces with warning tone and normal emphasis. */ - --wpds-color-bg-surface-warning-weak: var( - --wpds-color-private-warning-surface2 - ); /* Background color for surfaces with warning tone and weak emphasis. */ - --wpds-color-bg-thumb-brand: var( - --wpds-color-private-primary-stroke3 - ); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */ - --wpds-color-bg-thumb-brand-active: var( - --wpds-color-private-primary-stroke3 - ); /* 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: var( - --wpds-color-private-bg-stroke2 - ); /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */ - --wpds-color-bg-thumb-neutral-weak: var( - --wpds-color-private-bg-stroke3 - ); /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */ - --wpds-color-bg-thumb-neutral-weak-active: var( - --wpds-color-private-bg-stroke4 - ); /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */ - --wpds-color-bg-track-neutral: var( - --wpds-color-private-bg-stroke2 - ); /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */ - --wpds-color-bg-track-neutral-weak: var( - --wpds-color-private-bg-stroke1 - ); /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */ - --wpds-color-fg-content-caution: var( - --wpds-color-private-caution-fg-surface4 - ); /* Foreground color for content like text with caution tone and normal emphasis. */ - --wpds-color-fg-content-caution-weak: var( - --wpds-color-private-caution-fg-surface3 - ); /* Foreground color for content like text with caution tone and weak emphasis. */ - --wpds-color-fg-content-error: var( - --wpds-color-private-error-fg-surface4 - ); /* Foreground color for content like text with error tone and normal emphasis. */ - --wpds-color-fg-content-error-weak: var( - --wpds-color-private-error-fg-surface3 - ); /* Foreground color for content like text with error tone and weak emphasis. */ - --wpds-color-fg-content-info: var( - --wpds-color-private-info-fg-surface4 - ); /* Foreground color for content like text with info tone and normal emphasis. */ - --wpds-color-fg-content-info-weak: var( - --wpds-color-private-info-fg-surface3 - ); /* Foreground color for content like text with info tone and weak emphasis. */ - --wpds-color-fg-content-neutral: var( - --wpds-color-private-bg-fg-surface4 - ); /* Foreground color for content like text with normal emphasis. */ - --wpds-color-fg-content-neutral-weak: var( - --wpds-color-private-bg-fg-surface3 - ); /* Foreground color for content like text with weak emphasis. */ - --wpds-color-fg-content-success: var( - --wpds-color-private-success-fg-surface4 - ); /* Foreground color for content like text with success tone and normal emphasis. */ - --wpds-color-fg-content-success-weak: var( - --wpds-color-private-success-fg-surface3 - ); /* Foreground color for content like text with success tone and weak emphasis. */ - --wpds-color-fg-content-warning: var( - --wpds-color-private-warning-fg-surface4 - ); /* Foreground color for content like text with warning tone and normal emphasis. */ - --wpds-color-fg-content-warning-weak: var( - --wpds-color-private-warning-fg-surface3 - ); /* Foreground color for content like text with warning tone and weak emphasis. */ - --wpds-color-fg-interactive-brand: var( - --wpds-color-private-primary-fg-surface3 - ); /* Foreground color for interactive elements with brand tone and normal emphasis. */ - --wpds-color-fg-interactive-brand-active: var( - --wpds-color-private-primary-fg-surface3 - ); /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */ - --wpds-color-fg-interactive-brand-disabled: var( - --wpds-color-private-bg-fg-surface2 - ); /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */ - --wpds-color-fg-interactive-brand-strong: var( - --wpds-color-private-primary-fg-fill - ); /* Foreground color for interactive elements with brand tone and strong emphasis. */ - --wpds-color-fg-interactive-brand-strong-active: var( - --wpds-color-private-primary-fg-fill - ); /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */ - --wpds-color-fg-interactive-brand-strong-disabled: var( - --wpds-color-private-bg-fg-surface3 - ); /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */ - --wpds-color-fg-interactive-neutral: var( - --wpds-color-private-bg-fg-surface4 - ); /* Foreground color for interactive elements with neutral tone and normal emphasis. */ - --wpds-color-fg-interactive-neutral-active: var( - --wpds-color-private-bg-fg-surface4 - ); /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */ - --wpds-color-fg-interactive-neutral-disabled: var( - --wpds-color-private-bg-fg-surface2 - ); /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */ - --wpds-color-fg-interactive-neutral-strong: var( - --wpds-color-private-bg-fg-fill-inverted - ); /* Foreground color for interactive elements with neutral tone and strong emphasis. */ - --wpds-color-fg-interactive-neutral-strong-active: var( - --wpds-color-private-bg-fg-fill-inverted - ); /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */ - --wpds-color-fg-interactive-neutral-strong-disabled: var( - --wpds-color-private-bg-fg-surface3 - ); /* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */ - --wpds-color-fg-interactive-neutral-weak: var( - --wpds-color-private-bg-fg-surface3 - ); /* Foreground color for interactive elements with neutral tone and weak emphasis. */ - --wpds-color-fg-interactive-neutral-weak-disabled: var( - --wpds-color-private-bg-fg-surface2 - ); /* Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. */ - --wpds-color-private-bg-bg-fill-dark: #1e1e1e; - --wpds-color-private-bg-bg-fill-inverted1: #2f2f2f; - --wpds-color-private-bg-bg-fill-inverted2: #1e1e1e; - --wpds-color-private-bg-bg-fill1: #555555; - --wpds-color-private-bg-bg-fill2: #474747; - --wpds-color-private-bg-fg-fill: #f0f0f0; - --wpds-color-private-bg-fg-fill-dark: #f0f0f0; - --wpds-color-private-bg-fg-fill-inverted: #f0f0f0; - --wpds-color-private-bg-fg-surface1: #aaaaaa; - --wpds-color-private-bg-fg-surface2: #8a8a8a; - --wpds-color-private-bg-fg-surface3: #6d6d6d; - --wpds-color-private-bg-fg-surface4: #1e1e1e; - --wpds-color-private-bg-stroke1: #d0d0d0; - --wpds-color-private-bg-stroke2: #aeaeae; - --wpds-color-private-bg-stroke3: #8a8a8a; - --wpds-color-private-bg-stroke4: #6b6b6b; - --wpds-color-private-bg-surface1: #f1f1f1; - --wpds-color-private-bg-surface2: #f8f8f8; - --wpds-color-private-bg-surface3: #ffffff; - --wpds-color-private-bg-surface4: #ebebeb; - --wpds-color-private-bg-surface5: #e0e0e0; - --wpds-color-private-bg-surface6: #d0d0d0; - --wpds-color-private-caution-bg-fill-dark: #1f1e1b; - --wpds-color-private-caution-bg-fill-inverted1: #3d2d00; - --wpds-color-private-caution-bg-fill-inverted2: #1f1e1b; - --wpds-color-private-caution-bg-fill1: #f0d149; - --wpds-color-private-caution-bg-fill2: #dabb2b; - --wpds-color-private-caution-fg-fill: #1f1e1b; - --wpds-color-private-caution-fg-fill-dark: #f6f1da; - --wpds-color-private-caution-fg-fill-inverted: #f6f1da; - --wpds-color-private-caution-fg-surface1: #c7a800; - --wpds-color-private-caution-fg-surface2: #a68800; - --wpds-color-private-caution-fg-surface3: #876a00; - --wpds-color-private-caution-fg-surface4: #291d00; - --wpds-color-private-caution-stroke1: #b9ac76; - --wpds-color-private-caution-stroke2: #998e61; - --wpds-color-private-caution-stroke3: #876a00; - --wpds-color-private-caution-stroke4: #654e00; - --wpds-color-private-caution-surface1: #faf1cd; - --wpds-color-private-caution-surface2: #fdf9e7; - --wpds-color-private-caution-surface3: #ffffff; - --wpds-color-private-caution-surface4: #f8ebb6; - --wpds-color-private-caution-surface5: #f4e08c; - --wpds-color-private-caution-surface6: #e7d071; - --wpds-color-private-error-bg-fill-dark: #231c1b; - --wpds-color-private-error-bg-fill-inverted1: #6d0000; - --wpds-color-private-error-bg-fill-inverted2: #231c1b; - --wpds-color-private-error-bg-fill1: #cc1818; - --wpds-color-private-error-bg-fill2: #b90000; - --wpds-color-private-error-fg-fill: #f2efef; - --wpds-color-private-error-fg-fill-dark: #f2efef; - --wpds-color-private-error-fg-fill-inverted: #f2efef; - --wpds-color-private-error-fg-surface1: #ff8171; - --wpds-color-private-error-fg-surface2: #f74c40; - --wpds-color-private-error-fg-surface3: #cc1818; - --wpds-color-private-error-fg-surface4: #4a0000; - --wpds-color-private-error-stroke1: #dc9085; - --wpds-color-private-error-stroke2: #cd695d; - --wpds-color-private-error-stroke3: #cc1818; - --wpds-color-private-error-stroke4: #a40000; - --wpds-color-private-error-surface1: #fcedeb; - --wpds-color-private-error-surface2: #fdf6f5; - --wpds-color-private-error-surface3: #ffffff; - --wpds-color-private-error-surface4: #fae5e2; - --wpds-color-private-error-surface5: #f8d8d3; - --wpds-color-private-error-surface6: #f5c5be; - --wpds-color-private-info-bg-fill-dark: #1b1e23; - --wpds-color-private-info-bg-fill-inverted1: #00297a; - --wpds-color-private-info-bg-fill-inverted2: #1b1e23; - --wpds-color-private-info-bg-fill1: #0090ff; - --wpds-color-private-info-bg-fill2: #007eec; - --wpds-color-private-info-fg-fill: #1b1e23; - --wpds-color-private-info-fg-fill-dark: #eff0f2; - --wpds-color-private-info-fg-fill-inverted: #eff0f2; - --wpds-color-private-info-fg-surface1: #4fb0ff; - --wpds-color-private-info-fg-surface2: #008bfa; - --wpds-color-private-info-fg-surface3: #006dd9; - --wpds-color-private-info-fg-surface4: #001758; - --wpds-color-private-info-stroke1: #8baed6; - --wpds-color-private-info-stroke2: #5d90c8; - --wpds-color-private-info-stroke3: #006dd9; - --wpds-color-private-info-stroke4: #004bb5; - --wpds-color-private-info-surface1: #eaf2fa; - --wpds-color-private-info-surface2: #f5f9fd; - --wpds-color-private-info-surface3: #ffffff; - --wpds-color-private-info-surface4: #e1ecf8; - --wpds-color-private-info-surface5: #d1e1f5; - --wpds-color-private-info-surface6: #bad3f0; - --wpds-color-private-primary-bg-fill-dark: #1b1e26; - --wpds-color-private-primary-bg-fill-inverted1: #1401a5; - --wpds-color-private-primary-bg-fill-inverted2: #1b1e26; - --wpds-color-private-primary-bg-fill1: #3858e9; - --wpds-color-private-primary-bg-fill2: #2c47d7; - --wpds-color-private-primary-fg-fill: #eff0f2; - --wpds-color-private-primary-fg-fill-dark: #eff0f2; - --wpds-color-private-primary-fg-fill-inverted: #eff0f2; - --wpds-color-private-primary-fg-surface1: #82a7ff; - --wpds-color-private-primary-fg-surface2: #5780ff; - --wpds-color-private-primary-fg-surface3: #3858e9; - --wpds-color-private-primary-fg-surface4: #080071; - --wpds-color-private-primary-stroke1: #92a4d0; - --wpds-color-private-primary-stroke2: #6f85c0; - --wpds-color-private-primary-stroke3: #3858e9; - --wpds-color-private-primary-stroke4: #2236c7; - --wpds-color-private-primary-surface1: #edf1fa; - --wpds-color-private-primary-surface2: #f6f8fc; - --wpds-color-private-primary-surface3: #ffffff; - --wpds-color-private-primary-surface4: #e6ebf7; - --wpds-color-private-primary-surface5: #d8e0f3; - --wpds-color-private-primary-surface6: #c4d0ee; - --wpds-color-private-success-bg-fill-dark: #1b1f1c; - --wpds-color-private-success-bg-fill-inverted1: #003a00; - --wpds-color-private-success-bg-fill-inverted2: #1b1f1c; - --wpds-color-private-success-bg-fill1: #4ab866; - --wpds-color-private-success-bg-fill2: #34a554; - --wpds-color-private-success-fg-fill: #1b1f1c; - --wpds-color-private-success-fg-fill-dark: #edf2ed; - --wpds-color-private-success-fg-fill-inverted: #edf2ed; - --wpds-color-private-success-fg-surface1: #52c06d; - --wpds-color-private-success-fg-surface2: #2b9e4e; - --wpds-color-private-success-fg-surface3: #008031; - --wpds-color-private-success-fg-surface4: #002b00; - --wpds-color-private-success-stroke1: #78bb84; - --wpds-color-private-success-stroke2: #629a6c; - --wpds-color-private-success-stroke3: #008031; - --wpds-color-private-success-stroke4: #006113; - --wpds-color-private-success-surface1: #def8e1; - --wpds-color-private-success-surface2: #f0fcf2; - --wpds-color-private-success-surface3: #ffffff; - --wpds-color-private-success-surface4: #cef5d3; - --wpds-color-private-success-surface5: #adf0b8; - --wpds-color-private-success-surface6: #7be792; - --wpds-color-private-warning-bg-fill-dark: #1f1e1b; - --wpds-color-private-warning-bg-fill-inverted1: #462800; - --wpds-color-private-warning-bg-fill-inverted2: #1f1e1b; - --wpds-color-private-warning-bg-fill1: #f0b849; - --wpds-color-private-warning-bg-fill2: #dba430; - --wpds-color-private-warning-fg-fill: #1f1e1b; - --wpds-color-private-warning-fg-fill-dark: #f3f0e9; - --wpds-color-private-warning-fg-fill-inverted: #f3f0e9; - --wpds-color-private-warning-fg-surface1: #d8a12b; - --wpds-color-private-warning-fg-surface2: #b68000; - --wpds-color-private-warning-fg-surface3: #976300; - --wpds-color-private-warning-fg-surface4: #2f1800; - --wpds-color-private-warning-stroke1: #c3a877; - --wpds-color-private-warning-stroke2: #a18a61; - --wpds-color-private-warning-stroke3: #976300; - --wpds-color-private-warning-stroke4: #734700; - --wpds-color-private-warning-surface1: #faefdd; - --wpds-color-private-warning-surface2: #fdf7ee; - --wpds-color-private-warning-surface3: #ffffff; - --wpds-color-private-warning-surface4: #f8e9ce; - --wpds-color-private-warning-surface5: #f5ddb2; - --wpds-color-private-warning-surface6: #f0cb89; - --wpds-color-stroke-focus-brand: var( - --wpds-color-private-primary-stroke3 - ); /* Accessible stroke color applied to focus rings. */ - --wpds-color-stroke-interactive-brand: var( - --wpds-color-private-primary-stroke3 - ); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */ - --wpds-color-stroke-interactive-brand-active: var( - --wpds-color-private-primary-stroke4 - ); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */ - --wpds-color-stroke-interactive-brand-disabled: var( - --wpds-color-private-bg-stroke2 - ); /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */ - --wpds-color-stroke-interactive-error-strong: var( - --wpds-color-private-error-stroke3 - ); /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */ - --wpds-color-stroke-interactive-neutral: var( - --wpds-color-private-bg-stroke3 - ); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */ - --wpds-color-stroke-interactive-neutral-active: var( - --wpds-color-private-bg-stroke4 - ); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */ - --wpds-color-stroke-interactive-neutral-disabled: var( - --wpds-color-private-bg-stroke2 - ); /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */ - --wpds-color-stroke-interactive-neutral-strong: var( - --wpds-color-private-bg-stroke4 - ); /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */ - --wpds-color-stroke-surface-brand: var( - --wpds-color-private-primary-stroke1 - ); /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */ - --wpds-color-stroke-surface-brand-strong: var( - --wpds-color-private-primary-stroke3 - ); /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */ - --wpds-color-stroke-surface-error: var( - --wpds-color-private-error-stroke1 - ); /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */ - --wpds-color-stroke-surface-error-strong: var( - --wpds-color-private-error-stroke3 - ); /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */ - --wpds-color-stroke-surface-info: var( - --wpds-color-private-info-stroke1 - ); /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */ - --wpds-color-stroke-surface-info-strong: var( - --wpds-color-private-info-stroke3 - ); /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */ - --wpds-color-stroke-surface-neutral: var( - --wpds-color-private-bg-stroke2 - ); /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */ - --wpds-color-stroke-surface-neutral-strong: var( - --wpds-color-private-bg-stroke3 - ); /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */ - --wpds-color-stroke-surface-neutral-weak: var( - --wpds-color-private-bg-stroke1 - ); /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */ - --wpds-color-stroke-surface-success: var( - --wpds-color-private-success-stroke1 - ); /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */ - --wpds-color-stroke-surface-success-strong: var( - --wpds-color-private-success-stroke3 - ); /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */ - --wpds-color-stroke-surface-warning: var( - --wpds-color-private-warning-stroke1 - ); /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */ - --wpds-color-stroke-surface-warning-strong: var( - --wpds-color-private-warning-stroke3 - ); /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */ - --wpds-dimension-base: var( - --wpds-dimension-private-space-10 - ); /* Base dimension unit */ - --wpds-dimension-padding-surface-large: var( - --wpds-dimension-private-space-60 - ); /* Large spacing for surfaces */ - --wpds-dimension-padding-surface-medium: var( - --wpds-dimension-private-space-40 - ); /* Medium spacing for surfaces */ - --wpds-dimension-padding-surface-small: var( - --wpds-dimension-private-space-30 - ); /* Small spacing for surfaces */ - --wpds-dimension-padding-surface-x-small: var( - --wpds-dimension-private-space-20 - ); /* Extra small spacing for surfaces */ - --wpds-dimension-private-space-0: 0; /* Empty space */ - --wpds-dimension-private-space-10: 4px; /* 1x base spacing */ - --wpds-dimension-private-space-20: 8px; /* 2x base spacing */ - --wpds-dimension-private-space-30: 12px; /* 3x base spacing */ - --wpds-dimension-private-space-40: 16px; /* 4x base spacing */ - --wpds-dimension-private-space-50: 20px; /* 5x base spacing */ - --wpds-dimension-private-space-60: 24px; /* 6x base spacing */ - --wpds-dimension-private-space-70: 32px; /* 8x base spacing */ - --wpds-dimension-private-space-80: 40px; /* 10x base spacing */ - --wpds-dimension-private-space-90: 48px; /* 12x base spacing */ + --wpds-color-bg-interactive-neutral-weak-active: #ebebeb; /* Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. */ + --wpds-color-bg-interactive-neutral-weak-disabled: #e0e0e0; /* Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. */ + --wpds-color-bg-surface-brand: #edf1fa; /* Background color for surfaces with brand tone and normal emphasis. */ + --wpds-color-bg-surface-caution: #f8ebb6; /* Background color for surfaces with caution tone and normal emphasis. */ + --wpds-color-bg-surface-caution-weak: #fdf9e7; /* Background color for surfaces with caution tone and weak emphasis. */ + --wpds-color-bg-surface-error: #fae5e2; /* Background color for surfaces with error tone and normal emphasis. */ + --wpds-color-bg-surface-error-weak: #fdf6f5; /* Background color for surfaces with error tone and weak emphasis. */ + --wpds-color-bg-surface-info: #e1ecf8; /* Background color for surfaces with info tone and normal emphasis. */ + --wpds-color-bg-surface-info-weak: #f5f9fd; /* Background color for surfaces with info tone and weak emphasis. */ + --wpds-color-bg-surface-neutral: #f8f8f8; /* Background color for surfaces with normal emphasis. */ + --wpds-color-bg-surface-neutral-strong: #ffffff; /* Background color for surfaces with strong emphasis. */ + --wpds-color-bg-surface-neutral-weak: #f1f1f1; /* Background color for surfaces with weak emphasis. */ + --wpds-color-bg-surface-success: #cef5d3; /* Background color for surfaces with success tone and normal emphasis. */ + --wpds-color-bg-surface-success-weak: #f0fcf2; /* Background color for surfaces with success tone and weak emphasis. */ + --wpds-color-bg-surface-warning: #f8e9ce; /* Background color for surfaces with warning tone and normal emphasis. */ + --wpds-color-bg-surface-warning-weak: #fdf7ee; /* Background color for surfaces with warning tone and weak emphasis. */ + --wpds-color-bg-thumb-brand: #3858e9; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). */ + --wpds-color-bg-thumb-brand-active: #3858e9; /* 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: #aeaeae; /* Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. */ + --wpds-color-bg-thumb-neutral-weak: #8a8a8a; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). */ + --wpds-color-bg-thumb-neutral-weak-active: #6b6b6b; /* Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. */ + --wpds-color-bg-track-neutral: #aeaeae; /* Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). */ + --wpds-color-bg-track-neutral-weak: #d0d0d0; /* Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). */ + --wpds-color-fg-content-caution: #291d00; /* Foreground color for content like text with caution tone and normal emphasis. */ + --wpds-color-fg-content-caution-weak: #876a00; /* Foreground color for content like text with caution tone and weak emphasis. */ + --wpds-color-fg-content-error: #4a0000; /* Foreground color for content like text with error tone and normal emphasis. */ + --wpds-color-fg-content-error-weak: #cc1818; /* Foreground color for content like text with error tone and weak emphasis. */ + --wpds-color-fg-content-info: #001758; /* Foreground color for content like text with info tone and normal emphasis. */ + --wpds-color-fg-content-info-weak: #006dd9; /* Foreground color for content like text with info tone and weak emphasis. */ + --wpds-color-fg-content-neutral: #1e1e1e; /* Foreground color for content like text with normal emphasis. */ + --wpds-color-fg-content-neutral-weak: #6d6d6d; /* Foreground color for content like text with weak emphasis. */ + --wpds-color-fg-content-success: #002b00; /* Foreground color for content like text with success tone and normal emphasis. */ + --wpds-color-fg-content-success-weak: #008031; /* Foreground color for content like text with success tone and weak emphasis. */ + --wpds-color-fg-content-warning: #2f1800; /* Foreground color for content like text with warning tone and normal emphasis. */ + --wpds-color-fg-content-warning-weak: #976300; /* Foreground color for content like text with warning tone and weak emphasis. */ + --wpds-color-fg-interactive-brand: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis. */ + --wpds-color-fg-interactive-brand-active: #3858e9; /* Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. */ + --wpds-color-fg-interactive-brand-disabled: #8a8a8a; /* Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. */ + --wpds-color-fg-interactive-brand-strong: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis. */ + --wpds-color-fg-interactive-brand-strong-active: #eff0f2; /* Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. */ + --wpds-color-fg-interactive-brand-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. */ + --wpds-color-fg-interactive-neutral: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis. */ + --wpds-color-fg-interactive-neutral-active: #1e1e1e; /* Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. */ + --wpds-color-fg-interactive-neutral-disabled: #8a8a8a; /* Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. */ + --wpds-color-fg-interactive-neutral-strong: #f0f0f0; /* Foreground color for interactive elements with neutral tone and strong emphasis. */ + --wpds-color-fg-interactive-neutral-strong-active: #f0f0f0; /* Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. */ + --wpds-color-fg-interactive-neutral-strong-disabled: #6d6d6d; /* Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. */ + --wpds-color-fg-interactive-neutral-weak: #6d6d6d; /* Foreground color for interactive elements with neutral tone and weak emphasis. */ + --wpds-color-fg-interactive-neutral-weak-disabled: #8a8a8a; /* Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. */ + --wpds-color-stroke-focus-brand: #3858e9; /* Accessible stroke color applied to focus rings. */ + --wpds-color-stroke-interactive-brand: #3858e9; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis. */ + --wpds-color-stroke-interactive-brand-active: #2236c7; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. */ + --wpds-color-stroke-interactive-brand-disabled: #aeaeae; /* Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. */ + --wpds-color-stroke-interactive-error-strong: #cc1818; /* Accessible stroke color used for interactive error-toned elements with strong emphasis. */ + --wpds-color-stroke-interactive-neutral: #8a8a8a; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. */ + --wpds-color-stroke-interactive-neutral-active: #6b6b6b; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. */ + --wpds-color-stroke-interactive-neutral-disabled: #aeaeae; /* Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. */ + --wpds-color-stroke-interactive-neutral-strong: #6b6b6b; /* Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. */ + --wpds-color-stroke-surface-brand: #92a4d0; /* Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. */ + --wpds-color-stroke-surface-brand-strong: #3858e9; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */ + --wpds-color-stroke-surface-error: #dc9085; /* Decorative stroke color used to define error-toned surface boundaries with normal emphasis. */ + --wpds-color-stroke-surface-error-strong: #cc1818; /* Decorative stroke color used to define error-toned surface boundaries with strong emphasis. */ + --wpds-color-stroke-surface-info: #8baed6; /* Decorative stroke color used to define info-toned surface boundaries with normal emphasis. */ + --wpds-color-stroke-surface-info-strong: #006dd9; /* Decorative stroke color used to define info-toned surface boundaries with strong emphasis. */ + --wpds-color-stroke-surface-neutral: #aeaeae; /* Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. */ + --wpds-color-stroke-surface-neutral-strong: #8a8a8a; /* Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. */ + --wpds-color-stroke-surface-neutral-weak: #d0d0d0; /* Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. */ + --wpds-color-stroke-surface-success: #78bb84; /* Decorative stroke color used to define success-toned surface boundaries with normal emphasis. */ + --wpds-color-stroke-surface-success-strong: #008031; /* Decorative stroke color used to define success-toned surface boundaries with strong emphasis. */ + --wpds-color-stroke-surface-warning: #c3a877; /* Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. */ + --wpds-color-stroke-surface-warning-strong: #976300; /* Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. */ + --wpds-dimension-base: 4px; /* Base dimension unit */ + --wpds-dimension-padding-surface-large: 24px; /* Large spacing for surfaces */ + --wpds-dimension-padding-surface-medium: 16px; /* Medium spacing for surfaces */ + --wpds-dimension-padding-surface-small: 12px; /* Small spacing for surfaces */ + --wpds-dimension-padding-surface-x-small: 8px; /* Extra small spacing for surfaces */ --wpds-elevation-large: 0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005; /* For components that confirm decisions or handle necessary interruptions. Example: Modals. */ --wpds-elevation-medium: 0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, diff --git a/packages/theme/src/prebuilt/json/figma.json b/packages/theme/src/prebuilt/json/figma.json index 98eb147925d880..a9a6d1cc2105fa 100644 --- a/packages/theme/src/prebuilt/json/figma.json +++ b/packages/theme/src/prebuilt/json/figma.json @@ -30,857 +30,87 @@ }, "description": "Border width for focus ring" }, - "Color/_Primitives/Primary/bgFill1": { - "value": { - ".": "#3858e9" - } - }, - "Color/_Primitives/Primary/fgFill": { - "value": { - ".": "#eff0f2" - } - }, - "Color/_Primitives/Primary/bgFill2": { - "value": { - ".": "#2c47d7" - } - }, - "Color/_Primitives/Primary/surface2": { - "value": { - ".": "#f6f8fc" - } - }, - "Color/_Primitives/Primary/surface6": { - "value": { - ".": "#c4d0ee" - } - }, - "Color/_Primitives/Primary/surface5": { - "value": { - ".": "#d8e0f3" - } - }, - "Color/_Primitives/Primary/surface4": { - "value": { - ".": "#e6ebf7" - } - }, - "Color/_Primitives/Primary/surface3": { - "value": { - ".": "#fff" - } - }, - "Color/_Primitives/Primary/fgSurface4": { - "value": { - ".": "#080071" - } - }, - "Color/_Primitives/Primary/fgSurface3": { - "value": { - ".": "#3858e9" - } - }, - "Color/_Primitives/Primary/fgSurface2": { - "value": { - ".": "#5780ff" - } - }, - "Color/_Primitives/Primary/fgSurface1": { - "value": { - ".": "#82a7ff" - } - }, - "Color/_Primitives/Primary/stroke3": { - "value": { - ".": "#3858e9" - } - }, - "Color/_Primitives/Primary/stroke4": { - "value": { - ".": "#2236c7" - } - }, - "Color/_Primitives/Primary/stroke2": { - "value": { - ".": "#6f85c0" - } - }, - "Color/_Primitives/Primary/stroke1": { - "value": { - ".": "#92a4d0" - } - }, - "Color/_Primitives/Primary/bgFillDark": { - "value": { - ".": "#1b1e26" - } - }, - "Color/_Primitives/Primary/fgFillDark": { - "value": { - ".": "#eff0f2" - } - }, - "Color/_Primitives/Primary/bgFillInverted2": { - "value": { - ".": "#1b1e26" - } - }, - "Color/_Primitives/Primary/bgFillInverted1": { - "value": { - ".": "#1401a5" - } - }, - "Color/_Primitives/Primary/fgFillInverted": { - "value": { - ".": "#eff0f2" - } - }, - "Color/_Primitives/Primary/surface1": { - "value": { - ".": "#edf1fa" - } - }, - "Color/_Primitives/Info/bgFill1": { - "value": { - ".": "#0090ff" - } - }, - "Color/_Primitives/Info/fgFill": { - "value": { - ".": "#1b1e23" - } - }, - "Color/_Primitives/Info/bgFill2": { - "value": { - ".": "#007eec" - } - }, - "Color/_Primitives/Info/surface2": { - "value": { - ".": "#f5f9fd" - } - }, - "Color/_Primitives/Info/surface6": { - "value": { - ".": "#bad3f0" - } - }, - "Color/_Primitives/Info/surface5": { - "value": { - ".": "#d1e1f5" - } - }, - "Color/_Primitives/Info/surface4": { - "value": { - ".": "#e1ecf8" - } - }, - "Color/_Primitives/Info/surface3": { - "value": { - ".": "#fff" - } - }, - "Color/_Primitives/Info/fgSurface4": { - "value": { - ".": "#001758" - } - }, - "Color/_Primitives/Info/fgSurface3": { - "value": { - ".": "#006dd9" - } - }, - "Color/_Primitives/Info/fgSurface2": { - "value": { - ".": "#008bfa" - } - }, - "Color/_Primitives/Info/fgSurface1": { - "value": { - ".": "#4fb0ff" - } - }, - "Color/_Primitives/Info/stroke3": { - "value": { - ".": "#006dd9" - } - }, - "Color/_Primitives/Info/stroke4": { - "value": { - ".": "#004bb5" - } - }, - "Color/_Primitives/Info/stroke2": { - "value": { - ".": "#5d90c8" - } - }, - "Color/_Primitives/Info/stroke1": { - "value": { - ".": "#8baed6" - } - }, - "Color/_Primitives/Info/bgFillDark": { - "value": { - ".": "#1b1e23" - } - }, - "Color/_Primitives/Info/fgFillDark": { - "value": { - ".": "#eff0f2" - } - }, - "Color/_Primitives/Info/bgFillInverted2": { - "value": { - ".": "#1b1e23" - } - }, - "Color/_Primitives/Info/bgFillInverted1": { - "value": { - ".": "#00297a" - } - }, - "Color/_Primitives/Info/fgFillInverted": { - "value": { - ".": "#eff0f2" - } - }, - "Color/_Primitives/Info/surface1": { - "value": { - ".": "#eaf2fa" - } - }, - "Color/_Primitives/Success/bgFill1": { - "value": { - ".": "#4ab866" - } - }, - "Color/_Primitives/Success/fgFill": { - "value": { - ".": "#1b1f1c" - } - }, - "Color/_Primitives/Success/bgFill2": { - "value": { - ".": "#34a554" - } - }, - "Color/_Primitives/Success/surface2": { - "value": { - ".": "#f0fcf2" - } - }, - "Color/_Primitives/Success/surface6": { - "value": { - ".": "#7be792" - } - }, - "Color/_Primitives/Success/surface5": { - "value": { - ".": "#adf0b8" - } - }, - "Color/_Primitives/Success/surface4": { - "value": { - ".": "#cef5d3" - } - }, - "Color/_Primitives/Success/surface3": { - "value": { - ".": "#fff" - } - }, - "Color/_Primitives/Success/fgSurface4": { - "value": { - ".": "#002b00" - } - }, - "Color/_Primitives/Success/fgSurface3": { - "value": { - ".": "#008031" - } - }, - "Color/_Primitives/Success/fgSurface2": { - "value": { - ".": "#2b9e4e" - } - }, - "Color/_Primitives/Success/fgSurface1": { - "value": { - ".": "#52c06d" - } - }, - "Color/_Primitives/Success/stroke3": { - "value": { - ".": "#008031" - } - }, - "Color/_Primitives/Success/stroke4": { - "value": { - ".": "#006113" - } - }, - "Color/_Primitives/Success/stroke2": { - "value": { - ".": "#629a6c" - } - }, - "Color/_Primitives/Success/stroke1": { - "value": { - ".": "#78bb84" - } - }, - "Color/_Primitives/Success/bgFillDark": { - "value": { - ".": "#1b1f1c" - } - }, - "Color/_Primitives/Success/fgFillDark": { - "value": { - ".": "#edf2ed" - } - }, - "Color/_Primitives/Success/bgFillInverted2": { - "value": { - ".": "#1b1f1c" - } - }, - "Color/_Primitives/Success/bgFillInverted1": { - "value": { - ".": "#003a00" - } - }, - "Color/_Primitives/Success/fgFillInverted": { - "value": { - ".": "#edf2ed" - } - }, - "Color/_Primitives/Success/surface1": { - "value": { - ".": "#def8e1" - } - }, - "Color/_Primitives/Warning/bgFill1": { - "value": { - ".": "#f0b849" - } - }, - "Color/_Primitives/Warning/fgFill": { - "value": { - ".": "#1f1e1b" - } - }, - "Color/_Primitives/Warning/bgFill2": { - "value": { - ".": "#dba430" - } - }, - "Color/_Primitives/Warning/surface2": { - "value": { - ".": "#fdf7ee" - } - }, - "Color/_Primitives/Warning/surface6": { - "value": { - ".": "#f0cb89" - } - }, - "Color/_Primitives/Warning/surface5": { - "value": { - ".": "#f5ddb2" - } - }, - "Color/_Primitives/Warning/surface4": { - "value": { - ".": "#f8e9ce" - } - }, - "Color/_Primitives/Warning/surface3": { - "value": { - ".": "#fff" - } - }, - "Color/_Primitives/Warning/fgSurface4": { - "value": { - ".": "#2f1800" - } - }, - "Color/_Primitives/Warning/fgSurface3": { - "value": { - ".": "#976300" - } - }, - "Color/_Primitives/Warning/fgSurface2": { - "value": { - ".": "#b68000" - } - }, - "Color/_Primitives/Warning/fgSurface1": { - "value": { - ".": "#d8a12b" - } - }, - "Color/_Primitives/Warning/stroke3": { - "value": { - ".": "#976300" - } - }, - "Color/_Primitives/Warning/stroke4": { - "value": { - ".": "#734700" - } - }, - "Color/_Primitives/Warning/stroke2": { - "value": { - ".": "#a18a61" - } - }, - "Color/_Primitives/Warning/stroke1": { - "value": { - ".": "#c3a877" - } - }, - "Color/_Primitives/Warning/bgFillDark": { - "value": { - ".": "#1f1e1b" - } - }, - "Color/_Primitives/Warning/fgFillDark": { - "value": { - ".": "#f3f0e9" - } - }, - "Color/_Primitives/Warning/bgFillInverted2": { - "value": { - ".": "#1f1e1b" - } - }, - "Color/_Primitives/Warning/bgFillInverted1": { - "value": { - ".": "#462800" - } - }, - "Color/_Primitives/Warning/fgFillInverted": { - "value": { - ".": "#f3f0e9" - } - }, - "Color/_Primitives/Warning/surface1": { - "value": { - ".": "#faefdd" - } - }, - "Color/_Primitives/Error/bgFill1": { - "value": { - ".": "#cc1818" - } - }, - "Color/_Primitives/Error/fgFill": { - "value": { - ".": "#f2efef" - } - }, - "Color/_Primitives/Error/bgFill2": { - "value": { - ".": "#b90000" - } - }, - "Color/_Primitives/Error/surface2": { - "value": { - ".": "#fdf6f5" - } - }, - "Color/_Primitives/Error/surface6": { - "value": { - ".": "#f5c5be" - } - }, - "Color/_Primitives/Error/surface5": { - "value": { - ".": "#f8d8d3" - } - }, - "Color/_Primitives/Error/surface4": { - "value": { - ".": "#fae5e2" - } - }, - "Color/_Primitives/Error/surface3": { - "value": { - ".": "#fff" - } - }, - "Color/_Primitives/Error/fgSurface4": { - "value": { - ".": "#4a0000" - } - }, - "Color/_Primitives/Error/fgSurface3": { - "value": { - ".": "#cc1818" - } - }, - "Color/_Primitives/Error/fgSurface2": { - "value": { - ".": "#f74c40" - } - }, - "Color/_Primitives/Error/fgSurface1": { - "value": { - ".": "#ff8171" - } - }, - "Color/_Primitives/Error/stroke3": { - "value": { - ".": "#cc1818" - } - }, - "Color/_Primitives/Error/stroke4": { - "value": { - ".": "#a40000" - } - }, - "Color/_Primitives/Error/stroke2": { - "value": { - ".": "#cd695d" - } - }, - "Color/_Primitives/Error/stroke1": { - "value": { - ".": "#dc9085" - } - }, - "Color/_Primitives/Error/bgFillDark": { - "value": { - ".": "#231c1b" - } - }, - "Color/_Primitives/Error/fgFillDark": { - "value": { - ".": "#f2efef" - } - }, - "Color/_Primitives/Error/bgFillInverted2": { - "value": { - ".": "#231c1b" - } - }, - "Color/_Primitives/Error/bgFillInverted1": { - "value": { - ".": "#6d0000" - } - }, - "Color/_Primitives/Error/fgFillInverted": { - "value": { - ".": "#f2efef" - } - }, - "Color/_Primitives/Error/surface1": { - "value": { - ".": "#fcedeb" - } - }, - "Color/_Primitives/Bg/surface2": { - "value": { - ".": "#f8f8f8" - } - }, - "Color/_Primitives/Bg/bgFill1": { - "value": { - ".": "#555" - } - }, - "Color/_Primitives/Bg/fgFill": { - "value": { - ".": "#f0f0f0" - } - }, - "Color/_Primitives/Bg/bgFill2": { - "value": { - ".": "#474747" - } - }, - "Color/_Primitives/Bg/surface6": { - "value": { - ".": "#d0d0d0" - } - }, - "Color/_Primitives/Bg/surface5": { - "value": { - ".": "#e0e0e0" - } - }, - "Color/_Primitives/Bg/surface4": { - "value": { - ".": "#ebebeb" - } - }, - "Color/_Primitives/Bg/surface3": { - "value": { - ".": "#fff" - } - }, - "Color/_Primitives/Bg/fgSurface4": { - "value": { - ".": "#1e1e1e" - } - }, - "Color/_Primitives/Bg/fgSurface3": { - "value": { - ".": "#6d6d6d" - } - }, - "Color/_Primitives/Bg/fgSurface2": { - "value": { - ".": "#8a8a8a" - } - }, - "Color/_Primitives/Bg/fgSurface1": { - "value": { - ".": "#aaa" - } - }, - "Color/_Primitives/Bg/stroke3": { - "value": { - ".": "#8a8a8a" - } - }, - "Color/_Primitives/Bg/stroke4": { - "value": { - ".": "#6b6b6b" - } - }, - "Color/_Primitives/Bg/stroke2": { - "value": { - ".": "#aeaeae" - } - }, - "Color/_Primitives/Bg/stroke1": { - "value": { - ".": "#d0d0d0" - } - }, - "Color/_Primitives/Bg/bgFillDark": { - "value": { - ".": "#1e1e1e" - } - }, - "Color/_Primitives/Bg/fgFillDark": { - "value": { - ".": "#f0f0f0" - } - }, - "Color/_Primitives/Bg/bgFillInverted2": { - "value": { - ".": "#1e1e1e" - } - }, - "Color/_Primitives/Bg/bgFillInverted1": { - "value": { - ".": "#2f2f2f" - } - }, - "Color/_Primitives/Bg/fgFillInverted": { - "value": { - ".": "#f0f0f0" - } - }, - "Color/_Primitives/Bg/surface1": { - "value": { - ".": "#f1f1f1" - } - }, - "Color/_Primitives/Caution/bgFill1": { - "value": { - ".": "#f0d149" - } - }, - "Color/_Primitives/Caution/fgFill": { - "value": { - ".": "#1f1e1b" - } - }, - "Color/_Primitives/Caution/bgFill2": { - "value": { - ".": "#dabb2b" - } - }, - "Color/_Primitives/Caution/surface2": { - "value": { - ".": "#fdf9e7" - } - }, - "Color/_Primitives/Caution/surface6": { - "value": { - ".": "#e7d071" - } - }, - "Color/_Primitives/Caution/surface5": { - "value": { - ".": "#f4e08c" - } - }, - "Color/_Primitives/Caution/surface4": { - "value": { - ".": "#f8ebb6" - } - }, - "Color/_Primitives/Caution/surface3": { - "value": { - ".": "#fff" - } - }, - "Color/_Primitives/Caution/fgSurface4": { - "value": { - ".": "#291d00" - } - }, - "Color/_Primitives/Caution/fgSurface3": { - "value": { - ".": "#876a00" - } - }, - "Color/_Primitives/Caution/fgSurface2": { - "value": { - ".": "#a68800" - } - }, - "Color/_Primitives/Caution/fgSurface1": { - "value": { - ".": "#c7a800" - } - }, - "Color/_Primitives/Caution/stroke3": { - "value": { - ".": "#876a00" - } - }, - "Color/_Primitives/Caution/stroke4": { - "value": { - ".": "#654e00" - } - }, - "Color/_Primitives/Caution/stroke2": { - "value": { - ".": "#998e61" - } - }, - "Color/_Primitives/Caution/stroke1": { - "value": { - ".": "#b9ac76" - } - }, - "Color/_Primitives/Caution/bgFillDark": { - "value": { - ".": "#1f1e1b" - } - }, - "Color/_Primitives/Caution/fgFillDark": { - "value": { - ".": "#f6f1da" - } - }, - "Color/_Primitives/Caution/bgFillInverted2": { - "value": { - ".": "#1f1e1b" - } - }, - "Color/_Primitives/Caution/bgFillInverted1": { - "value": { - ".": "#3d2d00" - } - }, - "Color/_Primitives/Caution/fgFillInverted": { - "value": { - ".": "#f6f1da" - } - }, - "Color/_Primitives/Caution/surface1": { - "value": { - ".": "#faf1cd" - } - }, "Color/Semantic/Background/Neutral/bgSur-neutral": { "value": { - ".": "{Color/_Primitives/Bg/surface2}" + ".": "#f8f8f8" }, "description": "Background color for surfaces with normal emphasis." }, "Color/Semantic/Background/Neutral/bgSur-neutral-strong": { "value": { - ".": "{Color/_Primitives/Bg/surface3}" + ".": "#fff" }, "description": "Background color for surfaces with strong emphasis." }, "Color/Semantic/Background/Neutral/bgSur-neutral-weak": { "value": { - ".": "{Color/_Primitives/Bg/surface1}" + ".": "#f1f1f1" }, "description": "Background color for surfaces with weak emphasis." }, "Color/Semantic/Background/Brand/bgSur-brand": { "value": { - ".": "{Color/_Primitives/Primary/surface1}" + ".": "#edf1fa" }, "description": "Background color for surfaces with brand tone and normal emphasis." }, "Color/Semantic/Background/Success/bgSur-success": { "value": { - ".": "{Color/_Primitives/Success/surface4}" + ".": "#cef5d3" }, "description": "Background color for surfaces with success tone and normal emphasis." }, "Color/Semantic/Background/Success/bgSur-success-weak": { "value": { - ".": "{Color/_Primitives/Success/surface2}" + ".": "#f0fcf2" }, "description": "Background color for surfaces with success tone and weak emphasis." }, "Color/Semantic/Background/Info/bgSur-info": { "value": { - ".": "{Color/_Primitives/Info/surface4}" + ".": "#e1ecf8" }, "description": "Background color for surfaces with info tone and normal emphasis." }, "Color/Semantic/Background/Info/bgSur-info-weak": { "value": { - ".": "{Color/_Primitives/Info/surface2}" + ".": "#f5f9fd" }, "description": "Background color for surfaces with info tone and weak emphasis." }, "Color/Semantic/Background/Warning/bgSur-warning": { "value": { - ".": "{Color/_Primitives/Warning/surface4}" + ".": "#f8e9ce" }, "description": "Background color for surfaces with warning tone and normal emphasis." }, "Color/Semantic/Background/Warning/bgSur-warning-weak": { "value": { - ".": "{Color/_Primitives/Warning/surface2}" + ".": "#fdf7ee" }, "description": "Background color for surfaces with warning tone and weak emphasis." }, "Color/Semantic/Background/Caution/bgSur-caution": { "value": { - ".": "{Color/_Primitives/Caution/surface4}" + ".": "#f8ebb6" }, "description": "Background color for surfaces with caution tone and normal emphasis." }, "Color/Semantic/Background/Caution/bgSur-caution-weak": { "value": { - ".": "{Color/_Primitives/Caution/surface2}" + ".": "#fdf9e7" }, "description": "Background color for surfaces with caution tone and weak emphasis." }, "Color/Semantic/Background/Error/bgSur-error": { "value": { - ".": "{Color/_Primitives/Error/surface4}" + ".": "#fae5e2" }, "description": "Background color for surfaces with error tone and normal emphasis." }, "Color/Semantic/Background/Error/bgSur-error-weak": { "value": { - ".": "{Color/_Primitives/Error/surface2}" + ".": "#fdf6f5" }, "description": "Background color for surfaces with error tone and weak emphasis." }, @@ -892,31 +122,31 @@ }, "Color/Semantic/Background/Neutral/bgInt-neutral-active": { "value": { - ".": "{Color/_Primitives/Bg/surface4}" + ".": "#ebebeb" }, "description": "Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active." }, "Color/Semantic/Background/Neutral/bgInt-neutral-disabled": { "value": { - ".": "{Color/_Primitives/Bg/surface5}" + ".": "#e0e0e0" }, "description": "Background color for interactive elements with neutral tone and normal emphasis, in their disabled state." }, "Color/Semantic/Background/Neutral/bgInt-neutral-strong": { "value": { - ".": "{Color/_Primitives/Bg/bgFillInverted1}" + ".": "#2f2f2f" }, "description": "Background color for interactive elements with neutral tone and strong emphasis." }, "Color/Semantic/Background/Neutral/bgInt-neutral-strong-active": { "value": { - ".": "{Color/_Primitives/Bg/bgFillInverted2}" + ".": "#1e1e1e" }, "description": "Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active." }, "Color/Semantic/Background/Neutral/bgInt-neutral-strong-disabled": { "value": { - ".": "{Color/_Primitives/Bg/surface6}" + ".": "#d0d0d0" }, "description": "Background color for interactive elements with neutral tone and strong emphasis, in their disabled state." }, @@ -928,13 +158,13 @@ }, "Color/Semantic/Background/Neutral/bgInt-neutral-weak-active": { "value": { - ".": "{Color/_Primitives/Bg/surface4}" + ".": "#ebebeb" }, "description": "Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active." }, "Color/Semantic/Background/Neutral/bgInt-neutral-weak-disabled": { "value": { - ".": "{Color/_Primitives/Bg/surface5}" + ".": "#e0e0e0" }, "description": "Background color for interactive elements with neutral tone and weak emphasis, in their disabled state." }, @@ -946,31 +176,31 @@ }, "Color/Semantic/Background/Brand/bgInt-brand-active": { "value": { - ".": "{Color/_Primitives/Primary/surface2}" + ".": "#f6f8fc" }, "description": "Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active." }, "Color/Semantic/Background/Brand/bgInt-brand-disabled": { "value": { - ".": "{Color/_Primitives/Bg/surface5}" + ".": "#e0e0e0" }, "description": "Background color for interactive elements with brand tone and normal emphasis, in their disabled state." }, "Color/Semantic/Background/Brand/bgInt-brand-strong": { "value": { - ".": "{Color/_Primitives/Primary/bgFill1}" + ".": "#3858e9" }, "description": "Background color for interactive elements with brand tone and strong emphasis." }, "Color/Semantic/Background/Brand/bgInt-brand-strong-active": { "value": { - ".": "{Color/_Primitives/Primary/bgFill2}" + ".": "#2c47d7" }, "description": "Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active." }, "Color/Semantic/Background/Brand/bgInt-brand-strong-disabled": { "value": { - ".": "{Color/_Primitives/Bg/surface6}" + ".": "#d0d0d0" }, "description": "Background color for interactive elements with brand tone and strong emphasis, in their disabled state." }, @@ -982,433 +212,373 @@ }, "Color/Semantic/Background/Brand/bgInt-brand-weak-active": { "value": { - ".": "{Color/_Primitives/Primary/surface4}" + ".": "#e6ebf7" }, "description": "Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active." }, "Color/Semantic/Background/Brand/bgInt-brand-weak-disabled": { "value": { - ".": "{Color/_Primitives/Bg/surface5}" + ".": "#e0e0e0" }, "description": "Background color for interactive elements with brand tone and weak emphasis, in their disabled state." }, "Color/Semantic/Background/Neutral/bgTra-neutral-weak": { "value": { - ".": "{Color/_Primitives/Bg/stroke1}" + ".": "#d0d0d0" }, "description": "Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track)." }, "Color/Semantic/Background/Neutral/bgTra-neutral": { "value": { - ".": "{Color/_Primitives/Bg/stroke2}" + ".": "#aeaeae" }, "description": "Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track)." }, "Color/Semantic/Background/Neutral/bgThu-neutral-weak": { "value": { - ".": "{Color/_Primitives/Bg/stroke3}" + ".": "#8a8a8a" }, "description": "Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb)." }, "Color/Semantic/Background/Neutral/bgThu-neutral-weak-active": { "value": { - ".": "{Color/_Primitives/Bg/stroke4}" + ".": "#6b6b6b" }, "description": "Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active." }, "Color/Semantic/Background/Brand/bgThu-brand": { "value": { - ".": "{Color/_Primitives/Primary/stroke3}" + ".": "#3858e9" }, "description": "Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track)." }, "Color/Semantic/Background/Brand/bgThu-brand-active": { "value": { - ".": "{Color/_Primitives/Primary/stroke3}" + ".": "#3858e9" }, "description": "Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active." }, "Color/Semantic/Background/Brand/bgThu-brand-disabled": { "value": { - ".": "{Color/_Primitives/Bg/stroke2}" + ".": "#aeaeae" }, "description": "Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state." }, "Color/Semantic/Foreground/Neutral/fgCon-neutral": { "value": { - ".": "{Color/_Primitives/Bg/fgSurface4}" + ".": "#1e1e1e" }, "description": "Foreground color for content like text with normal emphasis." }, "Color/Semantic/Foreground/Neutral/fgCon-neutral-weak": { "value": { - ".": "{Color/_Primitives/Bg/fgSurface3}" + ".": "#6d6d6d" }, "description": "Foreground color for content like text with weak emphasis." }, "Color/Semantic/Foreground/Success/fgCon-success": { "value": { - ".": "{Color/_Primitives/Success/fgSurface4}" + ".": "#002b00" }, "description": "Foreground color for content like text with success tone and normal emphasis." }, "Color/Semantic/Foreground/Success/fgCon-success-weak": { "value": { - ".": "{Color/_Primitives/Success/fgSurface3}" + ".": "#008031" }, "description": "Foreground color for content like text with success tone and weak emphasis." }, "Color/Semantic/Foreground/Info/fgCon-info": { "value": { - ".": "{Color/_Primitives/Info/fgSurface4}" + ".": "#001758" }, "description": "Foreground color for content like text with info tone and normal emphasis." }, "Color/Semantic/Foreground/Info/fgCon-info-weak": { "value": { - ".": "{Color/_Primitives/Info/fgSurface3}" + ".": "#006dd9" }, "description": "Foreground color for content like text with info tone and weak emphasis." }, "Color/Semantic/Foreground/Warning/fgCon-warning": { "value": { - ".": "{Color/_Primitives/Warning/fgSurface4}" + ".": "#2f1800" }, "description": "Foreground color for content like text with warning tone and normal emphasis." }, "Color/Semantic/Foreground/Warning/fgCon-warning-weak": { "value": { - ".": "{Color/_Primitives/Warning/fgSurface3}" + ".": "#976300" }, "description": "Foreground color for content like text with warning tone and weak emphasis." }, "Color/Semantic/Foreground/Caution/fgCon-caution": { "value": { - ".": "{Color/_Primitives/Caution/fgSurface4}" + ".": "#291d00" }, "description": "Foreground color for content like text with caution tone and normal emphasis." }, "Color/Semantic/Foreground/Caution/fgCon-caution-weak": { "value": { - ".": "{Color/_Primitives/Caution/fgSurface3}" + ".": "#876a00" }, "description": "Foreground color for content like text with caution tone and weak emphasis." }, "Color/Semantic/Foreground/Error/fgCon-error": { "value": { - ".": "{Color/_Primitives/Error/fgSurface4}" + ".": "#4a0000" }, "description": "Foreground color for content like text with error tone and normal emphasis." }, "Color/Semantic/Foreground/Error/fgCon-error-weak": { "value": { - ".": "{Color/_Primitives/Error/fgSurface3}" + ".": "#cc1818" }, "description": "Foreground color for content like text with error tone and weak emphasis." }, "Color/Semantic/Foreground/Neutral/fgInt-neutral": { "value": { - ".": "{Color/_Primitives/Bg/fgSurface4}" + ".": "#1e1e1e" }, "description": "Foreground color for interactive elements with neutral tone and normal emphasis." }, "Color/Semantic/Foreground/Neutral/fgInt-neutral-active": { "value": { - ".": "{Color/_Primitives/Bg/fgSurface4}" + ".": "#1e1e1e" }, "description": "Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active." }, "Color/Semantic/Foreground/Neutral/fgInt-neutral-disabled": { "value": { - ".": "{Color/_Primitives/Bg/fgSurface2}" + ".": "#8a8a8a" }, "description": "Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state." }, "Color/Semantic/Foreground/Neutral/fgInt-neutral-strong": { "value": { - ".": "{Color/_Primitives/Bg/fgFillInverted}" + ".": "#f0f0f0" }, "description": "Foreground color for interactive elements with neutral tone and strong emphasis." }, "Color/Semantic/Foreground/Neutral/fgInt-neutral-strong-active": { "value": { - ".": "{Color/_Primitives/Bg/fgFillInverted}" + ".": "#f0f0f0" }, "description": "Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active." }, "Color/Semantic/Foreground/Neutral/fgInt-neutral-strong-disabled": { "value": { - ".": "{Color/_Primitives/Bg/fgSurface3}" + ".": "#6d6d6d" }, "description": "Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state." }, "Color/Semantic/Foreground/Neutral/fgInt-neutral-weak": { "value": { - ".": "{Color/_Primitives/Bg/fgSurface3}" + ".": "#6d6d6d" }, "description": "Foreground color for interactive elements with neutral tone and weak emphasis." }, "Color/Semantic/Foreground/Neutral/fgInt-neutral-weak-disabled": { "value": { - ".": "{Color/_Primitives/Bg/fgSurface2}" + ".": "#8a8a8a" }, "description": "Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state." }, "Color/Semantic/Foreground/Brand/fgInt-brand": { "value": { - ".": "{Color/_Primitives/Primary/fgSurface3}" + ".": "#3858e9" }, "description": "Foreground color for interactive elements with brand tone and normal emphasis." }, "Color/Semantic/Foreground/Brand/fgInt-brand-active": { "value": { - ".": "{Color/_Primitives/Primary/fgSurface3}" + ".": "#3858e9" }, "description": "Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active." }, "Color/Semantic/Foreground/Brand/fgInt-brand-disabled": { "value": { - ".": "{Color/_Primitives/Bg/fgSurface2}" + ".": "#8a8a8a" }, "description": "Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state." }, "Color/Semantic/Foreground/Brand/fgInt-brand-strong": { "value": { - ".": "{Color/_Primitives/Primary/fgFill}" + ".": "#eff0f2" }, "description": "Foreground color for interactive elements with brand tone and strong emphasis." }, "Color/Semantic/Foreground/Brand/fgInt-brand-strong-active": { "value": { - ".": "{Color/_Primitives/Primary/fgFill}" + ".": "#eff0f2" }, "description": "Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active." }, "Color/Semantic/Foreground/Brand/fgInt-brand-strong-disabled": { "value": { - ".": "{Color/_Primitives/Bg/fgSurface3}" + ".": "#6d6d6d" }, "description": "Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state." }, "Color/Semantic/Stroke/Neutral/strokeSur-neutral": { "value": { - ".": "{Color/_Primitives/Bg/stroke2}" + ".": "#aeaeae" }, "description": "Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis." }, "Color/Semantic/Stroke/Neutral/strokeSur-neutral-weak": { "value": { - ".": "{Color/_Primitives/Bg/stroke1}" + ".": "#d0d0d0" }, "description": "Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis." }, "Color/Semantic/Stroke/Neutral/strokeSur-neutral-strong": { "value": { - ".": "{Color/_Primitives/Bg/stroke3}" + ".": "#8a8a8a" }, "description": "Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis." }, "Color/Semantic/Stroke/Brand/strokeSur-brand": { "value": { - ".": "{Color/_Primitives/Primary/stroke1}" + ".": "#92a4d0" }, "description": "Decorative stroke color used to define brand-toned surface boundaries with normal emphasis." }, "Color/Semantic/Stroke/Brand/strokeSur-brand-strong": { "value": { - ".": "{Color/_Primitives/Primary/stroke3}" + ".": "#3858e9" }, "description": "Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis." }, "Color/Semantic/Stroke/Success/strokeSur-success": { "value": { - ".": "{Color/_Primitives/Success/stroke1}" + ".": "#78bb84" }, "description": "Decorative stroke color used to define success-toned surface boundaries with normal emphasis." }, "Color/Semantic/Stroke/Success/strokeSur-success-strong": { "value": { - ".": "{Color/_Primitives/Success/stroke3}" + ".": "#008031" }, "description": "Decorative stroke color used to define success-toned surface boundaries with strong emphasis." }, "Color/Semantic/Stroke/Info/strokeSur-info": { "value": { - ".": "{Color/_Primitives/Info/stroke1}" + ".": "#8baed6" }, "description": "Decorative stroke color used to define info-toned surface boundaries with normal emphasis." }, "Color/Semantic/Stroke/Info/strokeSur-info-strong": { "value": { - ".": "{Color/_Primitives/Info/stroke3}" + ".": "#006dd9" }, "description": "Decorative stroke color used to define info-toned surface boundaries with strong emphasis." }, "Color/Semantic/Stroke/Warning/strokeSur-warning": { "value": { - ".": "{Color/_Primitives/Warning/stroke1}" + ".": "#c3a877" }, "description": "Decorative stroke color used to define warning-toned surface boundaries with normal emphasis." }, "Color/Semantic/Stroke/Warning/strokeSur-warning-strong": { "value": { - ".": "{Color/_Primitives/Warning/stroke3}" + ".": "#976300" }, "description": "Decorative stroke color used to define warning-toned surface boundaries with strong emphasis." }, "Color/Semantic/Stroke/Error/strokeSur-error": { "value": { - ".": "{Color/_Primitives/Error/stroke1}" + ".": "#dc9085" }, "description": "Decorative stroke color used to define error-toned surface boundaries with normal emphasis." }, "Color/Semantic/Stroke/Error/strokeSur-error-strong": { "value": { - ".": "{Color/_Primitives/Error/stroke3}" + ".": "#cc1818" }, "description": "Decorative stroke color used to define error-toned surface boundaries with strong emphasis." }, "Color/Semantic/Stroke/Neutral/strokeInt-neutral": { "value": { - ".": "{Color/_Primitives/Bg/stroke3}" + ".": "#8a8a8a" }, "description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis." }, "Color/Semantic/Stroke/Neutral/strokeInt-neutral-active": { "value": { - ".": "{Color/_Primitives/Bg/stroke4}" + ".": "#6b6b6b" }, "description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active." }, "Color/Semantic/Stroke/Neutral/strokeInt-neutral-disabled": { "value": { - ".": "{Color/_Primitives/Bg/stroke2}" + ".": "#aeaeae" }, "description": "Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state." }, "Color/Semantic/Stroke/Neutral/strokeInt-neutral-strong": { "value": { - ".": "{Color/_Primitives/Bg/stroke4}" + ".": "#6b6b6b" }, "description": "Accessible stroke color used for interactive neutrally-toned elements with strong emphasis." }, "Color/Semantic/Stroke/Brand/strokeInt-brand": { "value": { - ".": "{Color/_Primitives/Primary/stroke3}" + ".": "#3858e9" }, "description": "Accessible stroke color used for interactive brand-toned elements with normal emphasis." }, "Color/Semantic/Stroke/Brand/strokeInt-brand-active": { "value": { - ".": "{Color/_Primitives/Primary/stroke4}" + ".": "#2236c7" }, "description": "Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active." }, "Color/Semantic/Stroke/Brand/strokeInt-brand-disabled": { "value": { - ".": "{Color/_Primitives/Bg/stroke2}" + ".": "#aeaeae" }, "description": "Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state." }, "Color/Semantic/Stroke/Error/strokeInt-error-strong": { "value": { - ".": "{Color/_Primitives/Error/stroke3}" + ".": "#cc1818" }, "description": "Accessible stroke color used for interactive error-toned elements with strong emphasis." }, "Color/Semantic/Stroke/Brand/strokeFoc-brand": { "value": { - ".": "{Color/_Primitives/Primary/stroke3}" + ".": "#3858e9" }, "description": "Accessible stroke color applied to focus rings." }, - "Dimension/_Primitives/space-0": { - "value": { - ".": "0" - }, - "description": "Empty space" - }, - "Dimension/_Primitives/space-10": { - "value": { - ".": "4px" - }, - "description": "1x base spacing" - }, - "Dimension/_Primitives/space-20": { - "value": { - ".": "8px" - }, - "description": "2x base spacing" - }, - "Dimension/_Primitives/space-30": { - "value": { - ".": "12px" - }, - "description": "3x base spacing" - }, - "Dimension/_Primitives/space-40": { - "value": { - ".": "16px" - }, - "description": "4x base spacing" - }, - "Dimension/_Primitives/space-50": { - "value": { - ".": "20px" - }, - "description": "5x base spacing" - }, - "Dimension/_Primitives/space-60": { - "value": { - ".": "24px" - }, - "description": "6x base spacing" - }, - "Dimension/_Primitives/space-70": { - "value": { - ".": "32px" - }, - "description": "8x base spacing" - }, - "Dimension/_Primitives/space-80": { - "value": { - ".": "40px" - }, - "description": "10x base spacing" - }, - "Dimension/_Primitives/space-90": { - "value": { - ".": "48px" - }, - "description": "12x base spacing" - }, "Dimension/Semantic/base": { "value": { - ".": "{Dimension/_Primitives/space-10}" + ".": "4px" }, "description": "Base dimension unit" }, "Dimension/Semantic/padding-surface-x-small": { "value": { - ".": "{Dimension/_Primitives/space-20}" + ".": "8px" }, "description": "Extra small spacing for surfaces" }, "Dimension/Semantic/padding-surface-small": { "value": { - ".": "{Dimension/_Primitives/space-30}" + ".": "12px" }, "description": "Small spacing for surfaces" }, "Dimension/Semantic/padding-surface-medium": { "value": { - ".": "{Dimension/_Primitives/space-40}" + ".": "16px" }, "description": "Medium spacing for surfaces" }, "Dimension/Semantic/padding-surface-large": { "value": { - ".": "{Dimension/_Primitives/space-60}" + ".": "24px" }, "description": "Large spacing for surfaces" }, diff --git a/packages/theme/src/prebuilt/ts/color-tokens.ts b/packages/theme/src/prebuilt/ts/color-tokens.ts new file mode 100644 index 00000000000000..e648452f739831 --- /dev/null +++ b/packages/theme/src/prebuilt/ts/color-tokens.ts @@ -0,0 +1,117 @@ +/** + * This file is generated by the @wordpress/terrazzo-plugin-inline-alias-values plugin. + * Do not edit this file directly. + */ + +export default { + 'primary-bgFill1': [ 'bg-interactive-brand-strong' ], + 'primary-fgFill': [ + 'fg-interactive-brand-strong-active', + 'fg-interactive-brand-strong', + ], + 'primary-bgFill2': [ 'bg-interactive-brand-strong-active' ], + 'primary-surface2': [ 'bg-interactive-brand-active' ], + 'primary-surface4': [ 'bg-interactive-brand-weak-active' ], + 'primary-fgSurface3': [ + 'fg-interactive-brand-active', + 'fg-interactive-brand', + ], + 'primary-stroke3': [ + 'bg-thumb-brand-active', + 'bg-thumb-brand', + 'stroke-focus-brand', + 'stroke-interactive-brand', + 'stroke-surface-brand-strong', + ], + 'primary-stroke4': [ 'stroke-interactive-brand-active' ], + 'primary-stroke1': [ 'stroke-surface-brand' ], + 'primary-surface1': [ 'bg-surface-brand' ], + 'info-surface2': [ 'bg-surface-info-weak' ], + 'info-surface4': [ 'bg-surface-info' ], + 'info-fgSurface4': [ 'fg-content-info' ], + 'info-fgSurface3': [ 'fg-content-info-weak' ], + 'info-stroke3': [ 'stroke-surface-info-strong' ], + 'info-stroke1': [ 'stroke-surface-info' ], + 'success-surface2': [ 'bg-surface-success-weak' ], + 'success-surface4': [ 'bg-surface-success' ], + 'success-fgSurface4': [ 'fg-content-success' ], + 'success-fgSurface3': [ 'fg-content-success-weak' ], + 'success-stroke3': [ 'stroke-surface-success-strong' ], + 'success-stroke1': [ 'stroke-surface-success' ], + 'warning-surface2': [ 'bg-surface-warning-weak' ], + 'warning-surface4': [ 'bg-surface-warning' ], + 'warning-fgSurface4': [ 'fg-content-warning' ], + 'warning-fgSurface3': [ 'fg-content-warning-weak' ], + 'warning-stroke3': [ 'stroke-surface-warning-strong' ], + 'warning-stroke1': [ 'stroke-surface-warning' ], + 'error-surface2': [ 'bg-surface-error-weak' ], + 'error-surface4': [ 'bg-surface-error' ], + 'error-fgSurface4': [ 'fg-content-error' ], + 'error-fgSurface3': [ 'fg-content-error-weak' ], + 'error-stroke3': [ + 'stroke-interactive-error-strong', + 'stroke-surface-error-strong', + ], + 'error-stroke1': [ 'stroke-surface-error' ], + 'bg-surface2': [ 'bg-surface-neutral' ], + 'bg-surface6': [ + 'bg-interactive-brand-strong-disabled', + 'bg-interactive-neutral-strong-disabled', + ], + 'bg-surface5': [ + 'bg-interactive-brand-disabled', + 'bg-interactive-brand-weak-disabled', + 'bg-interactive-neutral-disabled', + 'bg-interactive-neutral-weak-disabled', + ], + 'bg-surface4': [ + 'bg-interactive-neutral-active', + 'bg-interactive-neutral-weak-active', + ], + 'bg-surface3': [ 'bg-surface-neutral-strong' ], + 'bg-fgSurface4': [ + 'fg-content-neutral', + 'fg-interactive-neutral-active', + 'fg-interactive-neutral', + ], + 'bg-fgSurface3': [ + 'fg-content-neutral-weak', + 'fg-interactive-brand-strong-disabled', + 'fg-interactive-neutral-strong-disabled', + 'fg-interactive-neutral-weak', + ], + 'bg-fgSurface2': [ + 'fg-interactive-brand-disabled', + 'fg-interactive-neutral-disabled', + 'fg-interactive-neutral-weak-disabled', + ], + 'bg-stroke3': [ + 'bg-thumb-neutral-weak', + 'stroke-interactive-neutral', + 'stroke-surface-neutral-strong', + ], + 'bg-stroke4': [ + 'bg-thumb-neutral-weak-active', + 'stroke-interactive-neutral-active', + 'stroke-interactive-neutral-strong', + ], + 'bg-stroke2': [ + 'bg-thumb-brand-disabled', + 'bg-track-neutral', + 'stroke-interactive-brand-disabled', + 'stroke-interactive-neutral-disabled', + 'stroke-surface-neutral', + ], + 'bg-stroke1': [ 'bg-track-neutral-weak', 'stroke-surface-neutral-weak' ], + 'bg-bgFillInverted2': [ 'bg-interactive-neutral-strong-active' ], + 'bg-bgFillInverted1': [ 'bg-interactive-neutral-strong' ], + 'bg-fgFillInverted': [ + 'fg-interactive-neutral-strong-active', + 'fg-interactive-neutral-strong', + ], + 'bg-surface1': [ 'bg-surface-neutral-weak' ], + 'caution-surface2': [ 'bg-surface-caution-weak' ], + 'caution-surface4': [ 'bg-surface-caution' ], + 'caution-fgSurface4': [ 'fg-content-caution' ], + 'caution-fgSurface3': [ 'fg-content-caution-weak' ], +} as Record< string, string[] >; diff --git a/packages/theme/src/prebuilt/ts/design-tokens.ts b/packages/theme/src/prebuilt/ts/design-tokens.ts deleted file mode 100644 index 9ac3a429bbef0a..00000000000000 --- a/packages/theme/src/prebuilt/ts/design-tokens.ts +++ /dev/null @@ -1,356 +0,0 @@ -/** - * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin. - * Do not edit this file directly. - */ - -export default { - '--wpds-border-radius-x-small': { - '.': '1px', - }, - '--wpds-border-radius-small': { - '.': '2px', - }, - '--wpds-border-radius-medium': { - '.': '4px', - }, - '--wpds-border-radius-large': { - '.': '8px', - }, - '--wpds-border-width-focus': { - '.': '2px', - 'high-dpi': '1.5px', - }, - '--wpds-color-bg-surface-neutral': { - '.': 'var(--wpds-color-private-bg-surface2)', - }, - '--wpds-color-bg-surface-neutral-strong': { - '.': 'var(--wpds-color-private-bg-surface3)', - }, - '--wpds-color-bg-surface-neutral-weak': { - '.': 'var(--wpds-color-private-bg-surface1)', - }, - '--wpds-color-bg-surface-brand': { - '.': 'var(--wpds-color-private-primary-surface1)', - }, - '--wpds-color-bg-surface-success': { - '.': 'var(--wpds-color-private-success-surface4)', - }, - '--wpds-color-bg-surface-success-weak': { - '.': 'var(--wpds-color-private-success-surface2)', - }, - '--wpds-color-bg-surface-info': { - '.': 'var(--wpds-color-private-info-surface4)', - }, - '--wpds-color-bg-surface-info-weak': { - '.': 'var(--wpds-color-private-info-surface2)', - }, - '--wpds-color-bg-surface-warning': { - '.': 'var(--wpds-color-private-warning-surface4)', - }, - '--wpds-color-bg-surface-warning-weak': { - '.': 'var(--wpds-color-private-warning-surface2)', - }, - '--wpds-color-bg-surface-caution': { - '.': 'var(--wpds-color-private-caution-surface4)', - }, - '--wpds-color-bg-surface-caution-weak': { - '.': 'var(--wpds-color-private-caution-surface2)', - }, - '--wpds-color-bg-surface-error': { - '.': 'var(--wpds-color-private-error-surface4)', - }, - '--wpds-color-bg-surface-error-weak': { - '.': 'var(--wpds-color-private-error-surface2)', - }, - '--wpds-color-bg-interactive-neutral': { - '.': '#00000000', - }, - '--wpds-color-bg-interactive-neutral-active': { - '.': 'var(--wpds-color-private-bg-surface4)', - }, - '--wpds-color-bg-interactive-neutral-disabled': { - '.': 'var(--wpds-color-private-bg-surface5)', - }, - '--wpds-color-bg-interactive-neutral-strong': { - '.': 'var(--wpds-color-private-bg-bg-fill-inverted1)', - }, - '--wpds-color-bg-interactive-neutral-strong-active': { - '.': 'var(--wpds-color-private-bg-bg-fill-inverted2)', - }, - '--wpds-color-bg-interactive-neutral-strong-disabled': { - '.': 'var(--wpds-color-private-bg-surface6)', - }, - '--wpds-color-bg-interactive-neutral-weak': { - '.': '#00000000', - }, - '--wpds-color-bg-interactive-neutral-weak-active': { - '.': 'var(--wpds-color-private-bg-surface4)', - }, - '--wpds-color-bg-interactive-neutral-weak-disabled': { - '.': 'var(--wpds-color-private-bg-surface5)', - }, - '--wpds-color-bg-interactive-brand': { - '.': '#00000000', - }, - '--wpds-color-bg-interactive-brand-active': { - '.': 'var(--wpds-color-private-primary-surface2)', - }, - '--wpds-color-bg-interactive-brand-disabled': { - '.': 'var(--wpds-color-private-bg-surface5)', - }, - '--wpds-color-bg-interactive-brand-strong': { - '.': 'var(--wpds-color-private-primary-bg-fill1)', - }, - '--wpds-color-bg-interactive-brand-strong-active': { - '.': 'var(--wpds-color-private-primary-bg-fill2)', - }, - '--wpds-color-bg-interactive-brand-strong-disabled': { - '.': 'var(--wpds-color-private-bg-surface6)', - }, - '--wpds-color-bg-interactive-brand-weak': { - '.': '#00000000', - }, - '--wpds-color-bg-interactive-brand-weak-active': { - '.': 'var(--wpds-color-private-primary-surface4)', - }, - '--wpds-color-bg-interactive-brand-weak-disabled': { - '.': 'var(--wpds-color-private-bg-surface5)', - }, - '--wpds-color-bg-track-neutral-weak': { - '.': 'var(--wpds-color-private-bg-stroke1)', - }, - '--wpds-color-bg-track-neutral': { - '.': 'var(--wpds-color-private-bg-stroke2)', - }, - '--wpds-color-bg-thumb-neutral-weak': { - '.': 'var(--wpds-color-private-bg-stroke3)', - }, - '--wpds-color-bg-thumb-neutral-weak-active': { - '.': 'var(--wpds-color-private-bg-stroke4)', - }, - '--wpds-color-bg-thumb-brand': { - '.': 'var(--wpds-color-private-primary-stroke3)', - }, - '--wpds-color-bg-thumb-brand-active': { - '.': 'var(--wpds-color-private-primary-stroke3)', - }, - '--wpds-color-bg-thumb-brand-disabled': { - '.': 'var(--wpds-color-private-bg-stroke2)', - }, - '--wpds-color-fg-content-neutral': { - '.': 'var(--wpds-color-private-bg-fg-surface4)', - }, - '--wpds-color-fg-content-neutral-weak': { - '.': 'var(--wpds-color-private-bg-fg-surface3)', - }, - '--wpds-color-fg-content-success': { - '.': 'var(--wpds-color-private-success-fg-surface4)', - }, - '--wpds-color-fg-content-success-weak': { - '.': 'var(--wpds-color-private-success-fg-surface3)', - }, - '--wpds-color-fg-content-info': { - '.': 'var(--wpds-color-private-info-fg-surface4)', - }, - '--wpds-color-fg-content-info-weak': { - '.': 'var(--wpds-color-private-info-fg-surface3)', - }, - '--wpds-color-fg-content-warning': { - '.': 'var(--wpds-color-private-warning-fg-surface4)', - }, - '--wpds-color-fg-content-warning-weak': { - '.': 'var(--wpds-color-private-warning-fg-surface3)', - }, - '--wpds-color-fg-content-caution': { - '.': 'var(--wpds-color-private-caution-fg-surface4)', - }, - '--wpds-color-fg-content-caution-weak': { - '.': 'var(--wpds-color-private-caution-fg-surface3)', - }, - '--wpds-color-fg-content-error': { - '.': 'var(--wpds-color-private-error-fg-surface4)', - }, - '--wpds-color-fg-content-error-weak': { - '.': 'var(--wpds-color-private-error-fg-surface3)', - }, - '--wpds-color-fg-interactive-neutral': { - '.': 'var(--wpds-color-private-bg-fg-surface4)', - }, - '--wpds-color-fg-interactive-neutral-active': { - '.': 'var(--wpds-color-private-bg-fg-surface4)', - }, - '--wpds-color-fg-interactive-neutral-disabled': { - '.': 'var(--wpds-color-private-bg-fg-surface2)', - }, - '--wpds-color-fg-interactive-neutral-strong': { - '.': 'var(--wpds-color-private-bg-fg-fill-inverted)', - }, - '--wpds-color-fg-interactive-neutral-strong-active': { - '.': 'var(--wpds-color-private-bg-fg-fill-inverted)', - }, - '--wpds-color-fg-interactive-neutral-strong-disabled': { - '.': 'var(--wpds-color-private-bg-fg-surface3)', - }, - '--wpds-color-fg-interactive-neutral-weak': { - '.': 'var(--wpds-color-private-bg-fg-surface3)', - }, - '--wpds-color-fg-interactive-neutral-weak-disabled': { - '.': 'var(--wpds-color-private-bg-fg-surface2)', - }, - '--wpds-color-fg-interactive-brand': { - '.': 'var(--wpds-color-private-primary-fg-surface3)', - }, - '--wpds-color-fg-interactive-brand-active': { - '.': 'var(--wpds-color-private-primary-fg-surface3)', - }, - '--wpds-color-fg-interactive-brand-disabled': { - '.': 'var(--wpds-color-private-bg-fg-surface2)', - }, - '--wpds-color-fg-interactive-brand-strong': { - '.': 'var(--wpds-color-private-primary-fg-fill)', - }, - '--wpds-color-fg-interactive-brand-strong-active': { - '.': 'var(--wpds-color-private-primary-fg-fill)', - }, - '--wpds-color-fg-interactive-brand-strong-disabled': { - '.': 'var(--wpds-color-private-bg-fg-surface3)', - }, - '--wpds-color-stroke-surface-neutral': { - '.': 'var(--wpds-color-private-bg-stroke2)', - }, - '--wpds-color-stroke-surface-neutral-weak': { - '.': 'var(--wpds-color-private-bg-stroke1)', - }, - '--wpds-color-stroke-surface-neutral-strong': { - '.': 'var(--wpds-color-private-bg-stroke3)', - }, - '--wpds-color-stroke-surface-brand': { - '.': 'var(--wpds-color-private-primary-stroke1)', - }, - '--wpds-color-stroke-surface-brand-strong': { - '.': 'var(--wpds-color-private-primary-stroke3)', - }, - '--wpds-color-stroke-surface-success': { - '.': 'var(--wpds-color-private-success-stroke1)', - }, - '--wpds-color-stroke-surface-success-strong': { - '.': 'var(--wpds-color-private-success-stroke3)', - }, - '--wpds-color-stroke-surface-info': { - '.': 'var(--wpds-color-private-info-stroke1)', - }, - '--wpds-color-stroke-surface-info-strong': { - '.': 'var(--wpds-color-private-info-stroke3)', - }, - '--wpds-color-stroke-surface-warning': { - '.': 'var(--wpds-color-private-warning-stroke1)', - }, - '--wpds-color-stroke-surface-warning-strong': { - '.': 'var(--wpds-color-private-warning-stroke3)', - }, - '--wpds-color-stroke-surface-error': { - '.': 'var(--wpds-color-private-error-stroke1)', - }, - '--wpds-color-stroke-surface-error-strong': { - '.': 'var(--wpds-color-private-error-stroke3)', - }, - '--wpds-color-stroke-interactive-neutral': { - '.': 'var(--wpds-color-private-bg-stroke3)', - }, - '--wpds-color-stroke-interactive-neutral-active': { - '.': 'var(--wpds-color-private-bg-stroke4)', - }, - '--wpds-color-stroke-interactive-neutral-disabled': { - '.': 'var(--wpds-color-private-bg-stroke2)', - }, - '--wpds-color-stroke-interactive-neutral-strong': { - '.': 'var(--wpds-color-private-bg-stroke4)', - }, - '--wpds-color-stroke-interactive-brand': { - '.': 'var(--wpds-color-private-primary-stroke3)', - }, - '--wpds-color-stroke-interactive-brand-active': { - '.': 'var(--wpds-color-private-primary-stroke4)', - }, - '--wpds-color-stroke-interactive-brand-disabled': { - '.': 'var(--wpds-color-private-bg-stroke2)', - }, - '--wpds-color-stroke-interactive-error-strong': { - '.': 'var(--wpds-color-private-error-stroke3)', - }, - '--wpds-color-stroke-focus-brand': { - '.': 'var(--wpds-color-private-primary-stroke3)', - }, - '--wpds-dimension-base': { - '.': 'var(--wpds-dimension-private-space-10)', - }, - '--wpds-dimension-padding-surface-x-small': { - '.': 'var(--wpds-dimension-private-space-20)', - }, - '--wpds-dimension-padding-surface-small': { - '.': 'var(--wpds-dimension-private-space-30)', - }, - '--wpds-dimension-padding-surface-medium': { - '.': 'var(--wpds-dimension-private-space-40)', - }, - '--wpds-dimension-padding-surface-large': { - '.': 'var(--wpds-dimension-private-space-60)', - }, - '--wpds-elevation-x-small': { - '.': '0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003', - }, - '--wpds-elevation-small': { - '.': '0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005', - }, - '--wpds-elevation-medium': { - '.': '0 2px 3px 0 #0000000d, 0 4px 5px 0 #0000000a, 0 12px 12px 0 #00000008, 0 16px 16px 0 #00000005', - }, - '--wpds-elevation-large': { - '.': '0 5px 15px 0 #00000014, 0 15px 27px 0 #00000012, 0 30px 36px 0 #0000000a, 0 50px 43px 0 #00000005', - }, - '--wpds-font-family-heading': { - '.': '-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif', - }, - '--wpds-font-family-body': { - '.': '-apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif', - }, - '--wpds-font-family-mono': { - '.': '"Menlo", "Consolas", monaco, monospace', - }, - '--wpds-font-size-x-small': { - '.': '11px', - }, - '--wpds-font-size-small': { - '.': '12px', - }, - '--wpds-font-size-medium': { - '.': '13px', - }, - '--wpds-font-size-large': { - '.': '15px', - }, - '--wpds-font-size-x-large': { - '.': '20px', - }, - '--wpds-font-size-2x-large': { - '.': '32px', - }, - '--wpds-font-line-height-x-small': { - '.': '16px', - }, - '--wpds-font-line-height-small': { - '.': '20px', - }, - '--wpds-font-line-height-medium': { - '.': '24px', - }, - '--wpds-font-line-height-large': { - '.': '28px', - }, - '--wpds-font-line-height-x-large': { - '.': '32px', - }, - '--wpds-font-line-height-2x-large': { - '.': '40px', - }, -} as Record< string, Record< string, string > >; diff --git a/packages/theme/src/stories/index.story.tsx b/packages/theme/src/stories/index.story.tsx index 3af3e3e10318ff..68f1423f3e84f9 100644 --- a/packages/theme/src/stories/index.story.tsx +++ b/packages/theme/src/stories/index.story.tsx @@ -39,7 +39,6 @@ const meta: Meta< typeof ThemeProvider > = { export default meta; function getCSSCustomPropsFromStylesheets() { - const primitiveProps: Record< string, string > = {}; const semanticProps: Record< string, string > = {}; const legacyProps: Record< string, string > = {}; @@ -58,15 +57,9 @@ function getCSSCustomPropsFromStylesheets() { .trim(); } if ( name.startsWith( '--wpds-color' ) ) { - if ( name.includes( 'private' ) ) { - primitiveProps[ name ] = ruleStyle - .getPropertyValue( name ) - .trim(); - } else { - semanticProps[ name ] = ruleStyle - .getPropertyValue( name ) - .trim(); - } + semanticProps[ name ] = ruleStyle + .getPropertyValue( name ) + .trim(); } } } @@ -79,7 +72,7 @@ function getCSSCustomPropsFromStylesheets() { } } - return { primitiveProps, semanticProps, legacyProps }; + return { semanticProps, legacyProps }; } const ColorTokenTable = ( { @@ -126,11 +119,9 @@ const ColorTokenTable = ( { const DSTokensList = () => { const [ props, setProps ] = useState< { semanticProps: Record< string, string >; - primitiveProps: Record< string, string >; legacyProps: Record< string, string >; } >( { semanticProps: {}, - primitiveProps: {}, legacyProps: {}, } ); @@ -143,11 +134,6 @@ const DSTokensList = () => {

DS Color tokens

Semantic tokens (can be consumed directly)

-

Primitive tokens (should not be consumed directly)

-
- Click to expand - -

Legacy tokens (should not be consumed directly)

Click to expand diff --git a/packages/theme/src/test/token-id.test.ts b/packages/theme/src/test/token-id.test.ts new file mode 100644 index 00000000000000..2a7b347ff8ecd8 --- /dev/null +++ b/packages/theme/src/test/token-id.test.ts @@ -0,0 +1,12 @@ +/** + * Internal dependencies + */ +import { publicTokenId } from '../token-id'; + +describe( 'publicTokenId', () => { + it( 'should remove default states and visibility identifiers from the token id', () => { + expect( + publicTokenId( 'color.semantic.bg-surface.success.weak.resting' ) + ).toBe( 'color.bg-surface.success.weak' ); + } ); +} ); diff --git a/packages/theme/src/token-id.ts b/packages/theme/src/token-id.ts new file mode 100644 index 00000000000000..d74f4c54fdbe0e --- /dev/null +++ b/packages/theme/src/token-id.ts @@ -0,0 +1,9 @@ +/** + * Normalizes a token ID by removing default states and visibility identifiers, + * making it human-readable as a publicly-accessible variable name. + * + * @param id The token ID to normalize. + * @return The normalized token ID. + */ +export const publicTokenId = ( id: string ) => + id.replace( /\.(normal|resting|semantic|primitive)/g, '' ); diff --git a/packages/theme/src/use-theme-provider-styles.ts b/packages/theme/src/use-theme-provider-styles.ts index 23eca9db08882b..ca454832199766 100644 --- a/packages/theme/src/use-theme-provider-styles.ts +++ b/packages/theme/src/use-theme-provider-styles.ts @@ -23,7 +23,7 @@ import { useMemo, useContext } from '@wordpress/element'; */ import './color-ramps/lib/register-color-spaces'; import { ThemeContext } from './context'; -import semanticVariables from './prebuilt/ts/design-tokens'; +import colorTokens from './prebuilt/ts/color-tokens'; import { buildBgRamp, buildAccentRamp, @@ -152,31 +152,25 @@ function legacyWpAdminThemeOverridesCSS( accent: string ): Entry[] { ]; } -function semanticTokensCSS( - filterFn: ( entry: [ string, Record< string, string > ] ) => boolean = () => - true +function colorTokensCSS( + computedColorRamps: Map< string, RampResult > ): Entry[] { - return Object.entries( semanticVariables ) - .filter( filterFn ) - .map( ( [ variableName, modesAndValues ] ) => [ - variableName, - modesAndValues[ '.' ], - ] ); -} - -const toKebabCase = ( str: string ) => - str.replace( - /[A-Z]+(?![a-z])|[A-Z]/g, - ( $, ofs ) => ( ofs ? '-' : '' ) + $.toLowerCase() - ); + const entries: Entry[] = []; + + for ( const [ rampName, { ramp } ] of computedColorRamps ) { + for ( const [ tokenName, tokenValue ] of Object.entries( ramp ) ) { + const key = `${ rampName }-${ tokenName }`; + const aliasedBy = colorTokens[ key ] ?? []; + for ( const aliasedId of aliasedBy ) { + entries.push( [ + `--wpds-color-${ aliasedId }`, + tokenValue.color, + ] ); + } + } + } -function colorRampCSS( ramp: RampResult, prefix: string ): Entry[] { - return [ ...Object.entries( ramp.ramp ) ].map( - ( [ tokenName, tokenValue ] ) => [ - `${ prefix }${ toKebabCase( tokenName ) }`, - tokenValue.color, - ] - ); + return entries; } function generateStyles( { @@ -188,17 +182,8 @@ function generateStyles( { } ): CSSProperties { return Object.fromEntries( [ - // Primitive tokens - Array.from( computedColorRamps ) - .map( ( [ rampName, computedColorRamp ] ) => [ - colorRampCSS( - computedColorRamp, - `--wpds-color-private-${ rampName }-` - ), - ] ) - .flat( 2 ), - // Semantic color tokens (other semantic tokens for now are static) - semanticTokensCSS( ( [ key ] ) => /color/.test( key ) ), + // Semantic color tokens + colorTokensCSS( computedColorRamps ), // Legacy overrides legacyWpAdminThemeOverridesCSS( primary ), legacyWpComponentsOverridesCSS, diff --git a/packages/theme/terrazzo.config.ts b/packages/theme/terrazzo.config.ts index 1c43cf1c5becba..f7b6829a921461 100644 --- a/packages/theme/terrazzo.config.ts +++ b/packages/theme/terrazzo.config.ts @@ -4,12 +4,15 @@ import { defineConfig } from '@terrazzo/cli'; import pluginCSS from '@terrazzo/plugin-css'; import { makeCSSVar } from '@terrazzo/token-tools/css'; + /** * Internal dependencies */ import pluginFigmaDsTokenManager from './bin/terrazzo-plugin-figma-ds-token-manager/index'; import pluginKnownWpdsCssVariables from './bin/terrazzo-plugin-known-wpds-css-variables/index'; import pluginDsTokenDocs from './bin/terrazzo-plugin-ds-tokens-docs/index'; +import inlineAliasValues from './bin/terrazzo-plugin-inline-alias-values/index'; +import { publicTokenId } from './src/token-id.ts'; export default defineConfig( { tokens: [ @@ -22,16 +25,19 @@ export default defineConfig( { outDir: './src/prebuilt', plugins: [ + inlineAliasValues( { + pattern: /^color\.primitive\./, + filename: 'ts/color-tokens.ts', + tokenId: ( tokenId ) => + publicTokenId( tokenId ) + .replace( /^color\./, '' ) + .replace( /\./g, '-' ), + } ), + inlineAliasValues( { pattern: /^dimension\.primitive\./ } ), pluginCSS( { filename: 'css/design-tokens.css', variableName: ( token ) => - makeCSSVar( - `wpds.${ token.id - .replace( /normal/g, '' ) - .replace( /resting/g, '' ) - .replace( /primitive/g, 'private' ) - .replace( /semantic/g, '' ) }` - ), + makeCSSVar( `wpds.${ publicTokenId( token.id ) }` ), baseSelector: ':root', modeSelectors: [ { @@ -47,10 +53,7 @@ export default defineConfig( { filename: 'json/figma.json', } ), pluginKnownWpdsCssVariables( { - exports: [ - { filename: 'js/design-tokens.js', modes: false }, - { filename: 'ts/design-tokens.ts', modes: true }, - ], + filename: 'js/design-tokens.js', } ), pluginDsTokenDocs( { filename: '../../docs/ds-tokens.md',