@wordpress/theme 0.3.1-next.6deb34194.0 → 0.4.1-next.738bb1424.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +9 -0
- package/README.md +114 -40
- package/build/color-ramps/{index.js → index.cjs} +8 -8
- package/build/color-ramps/lib/{color-utils.js → color-utils.cjs} +2 -2
- package/build/color-ramps/lib/{constants.js → constants.cjs} +2 -2
- package/build/color-ramps/lib/{default-ramps.js → default-ramps.cjs} +1 -1
- package/build/color-ramps/lib/{find-color-with-constraints.js → find-color-with-constraints.cjs} +6 -6
- package/build/color-ramps/lib/{index.js → index.cjs} +6 -6
- package/build/color-ramps/lib/{ramp-configs.js → ramp-configs.cjs} +1 -1
- package/build/color-ramps/lib/{register-color-spaces.js → register-color-spaces.cjs} +1 -1
- package/build/color-ramps/lib/{taper-chroma.js → taper-chroma.cjs} +2 -2
- package/build/color-ramps/lib/{types.js → types.cjs} +1 -1
- package/build/color-ramps/lib/{utils.js → utils.cjs} +4 -4
- package/build/{context.js → context.cjs} +1 -1
- package/build/{index.js → index.cjs} +2 -2
- package/build/index.cjs.map +7 -0
- package/build/{lock-unlock.js → lock-unlock.cjs} +1 -1
- package/build/prebuilt/js/{design-tokens.js → design-tokens.cjs} +18 -2
- package/build/prebuilt/js/design-tokens.cjs.map +7 -0
- package/build/prebuilt/ts/{color-tokens.js → color-tokens.cjs} +36 -14
- package/build/prebuilt/ts/color-tokens.cjs.map +7 -0
- package/build/{token-id.js → prebuilt/ts/token-types.cjs} +4 -16
- package/build/prebuilt/ts/token-types.cjs.map +7 -0
- package/build/{private-apis.js → private-apis.cjs} +4 -4
- package/build/{theme-provider.js → theme-provider.cjs} +3 -3
- package/build/{types.js → types.cjs} +1 -1
- package/build/{use-theme-provider-styles.js → use-theme-provider-styles.cjs} +6 -6
- package/build-module/color-ramps/index.js +7 -7
- package/build-module/color-ramps/lib/color-utils.js +1 -1
- package/build-module/color-ramps/lib/constants.js +1 -1
- package/build-module/color-ramps/lib/find-color-with-constraints.js +5 -5
- package/build-module/color-ramps/lib/index.js +5 -5
- package/build-module/color-ramps/lib/taper-chroma.js +1 -1
- package/build-module/color-ramps/lib/utils.js +3 -3
- package/build-module/index.js +1 -1
- package/build-module/index.js.map +2 -2
- package/build-module/prebuilt/js/design-tokens.js +17 -1
- package/build-module/prebuilt/js/design-tokens.js.map +2 -2
- package/build-module/prebuilt/ts/color-tokens.js +35 -13
- package/build-module/prebuilt/ts/color-tokens.js.map +2 -2
- package/build-module/prebuilt/ts/token-types.js +1 -0
- package/build-module/prebuilt/ts/token-types.js.map +7 -0
- package/build-module/private-apis.js +3 -3
- package/build-module/theme-provider.js +2 -2
- package/build-module/use-theme-provider-styles.js +4 -4
- package/build-types/index.d.ts +2 -0
- package/build-types/index.d.ts.map +1 -1
- package/build-types/prebuilt/ts/color-tokens.d.ts.map +1 -1
- package/build-types/prebuilt/ts/token-types.d.ts +49 -0
- package/build-types/prebuilt/ts/token-types.d.ts.map +1 -0
- package/package.json +15 -7
- package/src/index.ts +2 -1
- package/src/prebuilt/css/design-tokens.css +18 -2
- package/src/prebuilt/js/design-tokens.js +17 -1
- package/src/prebuilt/ts/color-tokens.ts +31 -9
- package/src/prebuilt/ts/token-types.ts +125 -0
- package/bin/generate-default-ramps/index.ts +0 -49
- package/bin/generate-primitive-tokens/index.ts +0 -120
- package/bin/terrazzo-plugin-ds-tokens-docs/index.ts +0 -84
- package/bin/terrazzo-plugin-figma-ds-token-manager/index.ts +0 -217
- package/bin/terrazzo-plugin-figma-ds-token-manager/lib.ts +0 -1
- package/bin/terrazzo-plugin-inline-alias-values/index.ts +0 -113
- package/bin/terrazzo-plugin-known-wpds-css-variables/index.ts +0 -52
- package/build/index.js.map +0 -7
- package/build/prebuilt/js/design-tokens.js.map +0 -7
- package/build/prebuilt/json/figma.json +0 -787
- package/build/prebuilt/ts/color-tokens.js.map +0 -7
- package/build/token-id.js.map +0 -7
- package/build-module/prebuilt/json/figma.json +0 -787
- package/build-module/token-id.js +0 -6
- package/build-module/token-id.js.map +0 -7
- package/build-types/token-id.d.ts +0 -9
- package/build-types/token-id.d.ts.map +0 -1
- package/docs/ds-tokens.md +0 -160
- package/src/prebuilt/json/figma.json +0 -787
- package/src/test/token-id.test.ts +0 -12
- package/src/token-id.ts +0 -9
- package/terrazzo.config.ts +0 -126
- package/tokens/border.json +0 -56
- package/tokens/color.json +0 -1029
- package/tokens/dimension.json +0 -171
- package/tokens/elevation.json +0 -201
- package/tokens/typography.json +0 -93
- package/tsconfig.bin.json +0 -13
- package/tsconfig.bin.tsbuildinfo +0 -1
- package/tsconfig.json +0 -11
- package/tsconfig.src.json +0 -9
- package/tsconfig.src.tsbuildinfo +0 -1
- /package/build/color-ramps/{index.js.map → index.cjs.map} +0 -0
- /package/build/color-ramps/lib/{color-utils.js.map → color-utils.cjs.map} +0 -0
- /package/build/color-ramps/lib/{constants.js.map → constants.cjs.map} +0 -0
- /package/build/color-ramps/lib/{default-ramps.js.map → default-ramps.cjs.map} +0 -0
- /package/build/color-ramps/lib/{find-color-with-constraints.js.map → find-color-with-constraints.cjs.map} +0 -0
- /package/build/color-ramps/lib/{index.js.map → index.cjs.map} +0 -0
- /package/build/color-ramps/lib/{ramp-configs.js.map → ramp-configs.cjs.map} +0 -0
- /package/build/color-ramps/lib/{register-color-spaces.js.map → register-color-spaces.cjs.map} +0 -0
- /package/build/color-ramps/lib/{taper-chroma.js.map → taper-chroma.cjs.map} +0 -0
- /package/build/color-ramps/lib/{types.js.map → types.cjs.map} +0 -0
- /package/build/color-ramps/lib/{utils.js.map → utils.cjs.map} +0 -0
- /package/build/{context.js.map → context.cjs.map} +0 -0
- /package/build/{lock-unlock.js.map → lock-unlock.cjs.map} +0 -0
- /package/build/{private-apis.js.map → private-apis.cjs.map} +0 -0
- /package/build/{theme-provider.js.map → theme-provider.cjs.map} +0 -0
- /package/build/{types.js.map → types.cjs.map} +0 -0
- /package/build/{use-theme-provider-styles.js.map → use-theme-provider-styles.cjs.map} +0 -0
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { FORMAT_ID } from '@terrazzo/plugin-css';
|
|
5
|
-
import type { Plugin } from '@terrazzo/parser';
|
|
6
|
-
|
|
7
|
-
function titleCase( str: string ) {
|
|
8
|
-
return str[ 0 ].toUpperCase() + str.slice( 1 );
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
type TokensMap = Record< string, Record< string, string > >;
|
|
12
|
-
|
|
13
|
-
export default function pluginDsTokenDocs( {
|
|
14
|
-
filename = 'design-tokens.md',
|
|
15
|
-
} = {} ): Plugin {
|
|
16
|
-
return {
|
|
17
|
-
name: '@terrazzo/terrazzo-plugin-ds-tokens-docs',
|
|
18
|
-
async build( { getTransforms, outputFile } ) {
|
|
19
|
-
if ( ! filename ) {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
const semanticTokens: TokensMap = {};
|
|
24
|
-
// Re-use transformed tokens from the CSS plugin
|
|
25
|
-
for ( const token of getTransforms( {
|
|
26
|
-
format: FORMAT_ID,
|
|
27
|
-
id: '*',
|
|
28
|
-
mode: '.',
|
|
29
|
-
} ) ) {
|
|
30
|
-
if ( token.localID === undefined ) {
|
|
31
|
-
console.warn(
|
|
32
|
-
'Unexpected — Missing local ID when building token list for eslint plugin'
|
|
33
|
-
);
|
|
34
|
-
continue;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
// Use the tokens filename (without .json) as the group name
|
|
38
|
-
const group =
|
|
39
|
-
token.token.source.loc
|
|
40
|
-
?.split( '/' )
|
|
41
|
-
.at( -1 )
|
|
42
|
-
?.split( '.json' )[ 0 ] ?? 'Miscellaneous';
|
|
43
|
-
|
|
44
|
-
// Group by category
|
|
45
|
-
semanticTokens[ group ] ??= {};
|
|
46
|
-
semanticTokens[ group ][ token.localID ] =
|
|
47
|
-
token.token.$description ?? 'N/A';
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
function tokensToMdTable( tokens: TokensMap ) {
|
|
51
|
-
return Object.entries( tokens )
|
|
52
|
-
.map( ( [ group, tokensInGroup ] ) => [
|
|
53
|
-
`### ${ titleCase( group ) }`,
|
|
54
|
-
'',
|
|
55
|
-
'| Variable name | Description |',
|
|
56
|
-
'|---|---|',
|
|
57
|
-
...Object.entries( tokensInGroup ).map(
|
|
58
|
-
( [ name, description ] ) =>
|
|
59
|
-
`| \`${ name }\` | ${ description } |`
|
|
60
|
-
),
|
|
61
|
-
'',
|
|
62
|
-
] )
|
|
63
|
-
.flat( 2 );
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
outputFile(
|
|
67
|
-
filename,
|
|
68
|
-
[
|
|
69
|
-
'<!--',
|
|
70
|
-
'This file is generated by @terrazzo/terrazzo-plugin-ds-tokens-docs.',
|
|
71
|
-
'Do not edit directly.',
|
|
72
|
-
'-->',
|
|
73
|
-
'',
|
|
74
|
-
'# DS Tokens reference',
|
|
75
|
-
'',
|
|
76
|
-
'## Semantic tokens',
|
|
77
|
-
'',
|
|
78
|
-
...tokensToMdTable( semanticTokens ),
|
|
79
|
-
'', // final empty line
|
|
80
|
-
].join( '\n' )
|
|
81
|
-
);
|
|
82
|
-
},
|
|
83
|
-
};
|
|
84
|
-
}
|
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import type { Plugin, TokenNormalized } from '@terrazzo/parser';
|
|
5
|
-
import { transformCSSValue } from '@terrazzo/token-tools/css';
|
|
6
|
-
import {
|
|
7
|
-
parse,
|
|
8
|
-
to,
|
|
9
|
-
serialize,
|
|
10
|
-
sRGB,
|
|
11
|
-
type ColorConstructor,
|
|
12
|
-
} from 'colorjs.io/fn';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Internal dependencies
|
|
16
|
-
*/
|
|
17
|
-
import '../../src/color-ramps/lib/register-color-spaces';
|
|
18
|
-
import { FORMAT_JSON_ID } from './lib';
|
|
19
|
-
|
|
20
|
-
function titleCase( str: string ) {
|
|
21
|
-
return str[ 0 ].toUpperCase() + str.slice( 1 );
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function kebabToCamel( str: string ) {
|
|
25
|
-
return str.replace( /-([a-z])/g, ( _, letter ) => letter.toUpperCase() );
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
function transformTokenName( { id }: { id: string } ) {
|
|
29
|
-
return (
|
|
30
|
-
id
|
|
31
|
-
// Capitalize first segment
|
|
32
|
-
.replace( /^(\w+)\./g, ( _, g1 ) => `${ titleCase( g1 ) }/` )
|
|
33
|
-
// Capitalize
|
|
34
|
-
.replace( /primitive\./g, '_Primitives/' )
|
|
35
|
-
.replace( /semantic\./g, 'Semantic/' )
|
|
36
|
-
.replace(
|
|
37
|
-
/(color\/_Primitives)\/(\w+)\.(.*)/gi,
|
|
38
|
-
( _, prefix, tone, rampStep ) => {
|
|
39
|
-
return `${ prefix }/${ titleCase( tone ) }/${ rampStep }`;
|
|
40
|
-
}
|
|
41
|
-
)
|
|
42
|
-
// Color-specific transformation for semantic tokens:
|
|
43
|
-
// - add extra folder (Background, Foreground, Stroke)
|
|
44
|
-
// - swap "tone" folder order, capitalize
|
|
45
|
-
// - limit bg-* to 6 characters
|
|
46
|
-
// - keep last part of the token name with dots (eg no folders)
|
|
47
|
-
.replace(
|
|
48
|
-
/(color\/Semantic)\/([\w,\-]+)\.(\w+)\.(.*)/gi,
|
|
49
|
-
( _, prefix, element, tone, emphasisAndState ) => {
|
|
50
|
-
let extraFolder = '';
|
|
51
|
-
let elementName = element;
|
|
52
|
-
if ( /bg/.test( element ) ) {
|
|
53
|
-
extraFolder = 'Background/';
|
|
54
|
-
elementName = element.slice( 0, 6 );
|
|
55
|
-
} else if ( /fg/.test( element ) ) {
|
|
56
|
-
extraFolder = 'Foreground/';
|
|
57
|
-
elementName = element.slice( 0, 6 );
|
|
58
|
-
} else if ( /stroke/.test( element ) ) {
|
|
59
|
-
extraFolder = 'Stroke/';
|
|
60
|
-
elementName = element.slice( 0, 10 );
|
|
61
|
-
}
|
|
62
|
-
return `${ prefix }/${ extraFolder }${ titleCase(
|
|
63
|
-
tone
|
|
64
|
-
) }/${ kebabToCamel(
|
|
65
|
-
elementName
|
|
66
|
-
) }.${ tone }.${ emphasisAndState }`;
|
|
67
|
-
}
|
|
68
|
-
)
|
|
69
|
-
// Remove default emphasis and state variants from variable name
|
|
70
|
-
.replace( /normal\./g, '' )
|
|
71
|
-
.replace( /resting/g, '' )
|
|
72
|
-
// Remove double dots
|
|
73
|
-
.replace( /\.{2,}/g, '.' )
|
|
74
|
-
// Remove trailing dot
|
|
75
|
-
.replace( /\.$/g, '' )
|
|
76
|
-
// Replace remaining dots with dashes
|
|
77
|
-
.replace( /\./g, '-' )
|
|
78
|
-
);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
function transformColorToken(
|
|
82
|
-
token: TokenNormalized,
|
|
83
|
-
mode: string,
|
|
84
|
-
tokens: Record< string, TokenNormalized >
|
|
85
|
-
) {
|
|
86
|
-
if (
|
|
87
|
-
token.mode[ mode ]?.aliasChain &&
|
|
88
|
-
token.mode[ mode ].aliasChain.length > 0
|
|
89
|
-
) {
|
|
90
|
-
// Keep aliases
|
|
91
|
-
return `{${ transformTokenName( {
|
|
92
|
-
id: token.mode[ mode ].aliasChain[ 0 ],
|
|
93
|
-
} ) }}`;
|
|
94
|
-
}
|
|
95
|
-
// Start by letting terrazzo do the heavy lifting.
|
|
96
|
-
const baselineCSSValue = transformCSSValue( token, {
|
|
97
|
-
mode,
|
|
98
|
-
tokensSet: tokens,
|
|
99
|
-
transformAlias: transformTokenName,
|
|
100
|
-
} );
|
|
101
|
-
|
|
102
|
-
if ( baselineCSSValue === undefined ) {
|
|
103
|
-
console.warn( 'Unexpected: could not tranform color token value' );
|
|
104
|
-
return;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
let cssColorValue: string;
|
|
108
|
-
|
|
109
|
-
if ( typeof baselineCSSValue === 'object' ) {
|
|
110
|
-
if ( 'srgb' in baselineCSSValue ) {
|
|
111
|
-
// Pick SRGB gamut (safer compared to p3 or rec2020)
|
|
112
|
-
cssColorValue = baselineCSSValue.srgb;
|
|
113
|
-
} else {
|
|
114
|
-
console.log( 'UNSUPPORTED USE CASE' );
|
|
115
|
-
return;
|
|
116
|
-
}
|
|
117
|
-
} else {
|
|
118
|
-
cssColorValue = baselineCSSValue;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
// Always convert to hex
|
|
122
|
-
// (easier to convert to Figma RGB, and includes clamping)
|
|
123
|
-
let convertedColor: ColorConstructor;
|
|
124
|
-
try {
|
|
125
|
-
convertedColor = parse( cssColorValue );
|
|
126
|
-
} catch {
|
|
127
|
-
console.warn( 'Unexpected: could not convert token value to Color' );
|
|
128
|
-
return;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
return serialize( to( convertedColor, sRGB ), { format: 'hex' } );
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
export default function pluginFigmaDsTokenManager( {
|
|
135
|
-
filename = 'figma-ds-tokens.json',
|
|
136
|
-
} = {} ): Plugin {
|
|
137
|
-
return {
|
|
138
|
-
name: '@terrazzo/plugin-figma-ds-token-manager',
|
|
139
|
-
async transform( { tokens, getTransforms, setTransform } ) {
|
|
140
|
-
// skip work if another .json plugin has already run
|
|
141
|
-
const jsonTokens = getTransforms( {
|
|
142
|
-
format: FORMAT_JSON_ID,
|
|
143
|
-
id: '*',
|
|
144
|
-
mode: '.',
|
|
145
|
-
} );
|
|
146
|
-
if ( jsonTokens.length ) {
|
|
147
|
-
return;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
for ( const [ id, token ] of Object.entries( tokens ) ) {
|
|
151
|
-
for ( const mode of Object.keys( token.mode ) ) {
|
|
152
|
-
const localID = transformTokenName( token );
|
|
153
|
-
|
|
154
|
-
let transformedValue;
|
|
155
|
-
|
|
156
|
-
if ( token.$type === 'color' ) {
|
|
157
|
-
transformedValue = transformColorToken(
|
|
158
|
-
token,
|
|
159
|
-
mode,
|
|
160
|
-
tokens
|
|
161
|
-
);
|
|
162
|
-
} else if (
|
|
163
|
-
token.mode[ mode ]?.aliasChain &&
|
|
164
|
-
token.mode[ mode ].aliasChain.length > 0
|
|
165
|
-
) {
|
|
166
|
-
// Keep aliases
|
|
167
|
-
transformedValue = `{${ transformTokenName( {
|
|
168
|
-
id: token.mode[ mode ].aliasChain[ 0 ],
|
|
169
|
-
} ) }}`;
|
|
170
|
-
} else {
|
|
171
|
-
// Fallback to terrazzo
|
|
172
|
-
transformedValue = transformCSSValue( token, {
|
|
173
|
-
mode,
|
|
174
|
-
tokensSet: tokens,
|
|
175
|
-
transformAlias: transformTokenName,
|
|
176
|
-
} );
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
if ( transformedValue !== undefined ) {
|
|
180
|
-
setTransform( id, {
|
|
181
|
-
format: FORMAT_JSON_ID,
|
|
182
|
-
localID,
|
|
183
|
-
value: transformedValue,
|
|
184
|
-
mode,
|
|
185
|
-
} );
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
},
|
|
190
|
-
async build( { getTransforms, outputFile } ) {
|
|
191
|
-
const tokenVals: Record<
|
|
192
|
-
string,
|
|
193
|
-
{
|
|
194
|
-
value: Record< string, string | Record< string, string > >;
|
|
195
|
-
description?: string;
|
|
196
|
-
}
|
|
197
|
-
> = {};
|
|
198
|
-
|
|
199
|
-
for ( const token of getTransforms( {
|
|
200
|
-
format: FORMAT_JSON_ID,
|
|
201
|
-
id: '*',
|
|
202
|
-
} ) ) {
|
|
203
|
-
if ( ! token.localID ) {
|
|
204
|
-
continue;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
tokenVals[ token.localID ] ??= { value: {}, description: '' };
|
|
208
|
-
|
|
209
|
-
tokenVals[ token.localID ].value[ token.mode ] = token.value;
|
|
210
|
-
tokenVals[ token.localID ].description =
|
|
211
|
-
token.token.$description;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
outputFile( filename, JSON.stringify( tokenVals, null, 2 ) );
|
|
215
|
-
},
|
|
216
|
-
};
|
|
217
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const FORMAT_JSON_ID = 'json';
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { type Plugin, type TokenNormalized } from '@terrazzo/parser';
|
|
5
|
-
|
|
6
|
-
interface InlineAliasValuesOptions {
|
|
7
|
-
/**
|
|
8
|
-
* Output filename for the generated aliased tokens mapping.
|
|
9
|
-
*/
|
|
10
|
-
filename?: string;
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Pattern matching IDs of tokens whose values should be inlined into their alias references.
|
|
14
|
-
*/
|
|
15
|
-
pattern: RegExp;
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Optional function to transform token IDs in the output.
|
|
19
|
-
*/
|
|
20
|
-
tokenId?: ( tokenId: string ) => string;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Inlines the values of tokens matching the given pattern into their alias
|
|
25
|
-
* references. Matching tokens are removed from the output, and a TypeScript
|
|
26
|
-
* file is emitted with the mapping of aliased tokens.
|
|
27
|
-
*
|
|
28
|
-
* @param options The options for the plugin.
|
|
29
|
-
* @param options.filename
|
|
30
|
-
* @param options.pattern
|
|
31
|
-
* @param options.tokenId
|
|
32
|
-
*/
|
|
33
|
-
export default function inlineAliasValues( {
|
|
34
|
-
filename,
|
|
35
|
-
pattern,
|
|
36
|
-
tokenId = ( id ) => id,
|
|
37
|
-
}: InlineAliasValuesOptions ): Plugin {
|
|
38
|
-
const aliasedBy: Record< string, string[] > = {};
|
|
39
|
-
|
|
40
|
-
return {
|
|
41
|
-
name: '@wordpress/terrazzo-plugin-inline-alias-values',
|
|
42
|
-
async transform( { tokens } ) {
|
|
43
|
-
// Map of primitive token ID -> array of references to inline
|
|
44
|
-
const inlineMap: Record< string, TokenNormalized[] > = {};
|
|
45
|
-
|
|
46
|
-
// Single pass: identify primitives and collect references
|
|
47
|
-
for ( const [ id, token ] of Object.entries( tokens ) ) {
|
|
48
|
-
const shouldInline = pattern.test( id );
|
|
49
|
-
|
|
50
|
-
if ( shouldInline ) {
|
|
51
|
-
// Track this token for inlining
|
|
52
|
-
inlineMap[ id ] = [];
|
|
53
|
-
|
|
54
|
-
// Track aliased tokens for output file
|
|
55
|
-
if ( token.aliasedBy ) {
|
|
56
|
-
aliasedBy[ tokenId( id ) ] =
|
|
57
|
-
token.aliasedBy.map( tokenId );
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// Check if this token's main value references a primitive
|
|
62
|
-
if ( token.aliasOf && pattern.test( token.aliasOf ) ) {
|
|
63
|
-
inlineMap[ token.aliasOf ] ??= [];
|
|
64
|
-
inlineMap[ token.aliasOf ].push( token );
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// Check if any mode values reference a primitive
|
|
68
|
-
for ( const modeValue of Object.values( token.mode ) ) {
|
|
69
|
-
const { aliasOf } = modeValue;
|
|
70
|
-
if ( aliasOf && pattern.test( aliasOf ) ) {
|
|
71
|
-
const primitiveId = aliasOf;
|
|
72
|
-
inlineMap[ primitiveId ] ??= [];
|
|
73
|
-
inlineMap[ primitiveId ].push( modeValue );
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// Inline values and delete primitives
|
|
79
|
-
for ( const [ id, references ] of Object.entries( inlineMap ) ) {
|
|
80
|
-
const token = tokens[ id ];
|
|
81
|
-
|
|
82
|
-
for ( const target of references ) {
|
|
83
|
-
target.$value = token.$value;
|
|
84
|
-
target.originalValue = token.originalValue;
|
|
85
|
-
delete target.aliasOf;
|
|
86
|
-
delete target.aliasChain;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
delete tokens[ id ];
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
async build( { outputFile } ) {
|
|
93
|
-
if ( ! filename ) {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
const json = JSON.stringify( aliasedBy, null, 2 );
|
|
98
|
-
|
|
99
|
-
outputFile(
|
|
100
|
-
filename,
|
|
101
|
-
[
|
|
102
|
-
'/**',
|
|
103
|
-
' * This file is generated by the @wordpress/terrazzo-plugin-inline-alias-values plugin.',
|
|
104
|
-
' * Do not edit this file directly.',
|
|
105
|
-
' */',
|
|
106
|
-
'',
|
|
107
|
-
`export default ${ json } as Record< string, string[] >;`,
|
|
108
|
-
'',
|
|
109
|
-
].join( '\n' )
|
|
110
|
-
);
|
|
111
|
-
},
|
|
112
|
-
};
|
|
113
|
-
}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { FORMAT_ID } from '@terrazzo/plugin-css';
|
|
5
|
-
import type { Plugin } from '@terrazzo/parser';
|
|
6
|
-
|
|
7
|
-
export default function pluginKnownWpdsCssVariables( {
|
|
8
|
-
filename = 'design-tokens.js',
|
|
9
|
-
} = {} ): Plugin {
|
|
10
|
-
return {
|
|
11
|
-
name: '@terrazzo/plugin-known-wpds-css-variables',
|
|
12
|
-
async build( { getTransforms, outputFile } ) {
|
|
13
|
-
// Either a string (modes=false) or an object (modes=true)
|
|
14
|
-
const tokensToExport: Record<
|
|
15
|
-
string,
|
|
16
|
-
Record< string, string | Record< string, string > >
|
|
17
|
-
> = {};
|
|
18
|
-
|
|
19
|
-
for ( const token of getTransforms( {
|
|
20
|
-
format: FORMAT_ID,
|
|
21
|
-
id: '*',
|
|
22
|
-
} ) ) {
|
|
23
|
-
if ( ! token.localID ) {
|
|
24
|
-
console.warn(
|
|
25
|
-
'Unexpected — Missing local ID when building token list for eslint plugin'
|
|
26
|
-
);
|
|
27
|
-
continue;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
tokensToExport[ token.localID ] ??= {};
|
|
31
|
-
tokensToExport[ token.localID ][ token.mode ] = token.value;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
outputFile(
|
|
35
|
-
filename,
|
|
36
|
-
[
|
|
37
|
-
'/**',
|
|
38
|
-
' * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.',
|
|
39
|
-
' * Do not edit this file directly.',
|
|
40
|
-
' */',
|
|
41
|
-
'',
|
|
42
|
-
`export default ${ JSON.stringify(
|
|
43
|
-
Array.from( new Set( Object.keys( tokensToExport ) ) ),
|
|
44
|
-
null,
|
|
45
|
-
2
|
|
46
|
-
) }`,
|
|
47
|
-
'', // final empty line
|
|
48
|
-
].join( '\n' )
|
|
49
|
-
);
|
|
50
|
-
},
|
|
51
|
-
};
|
|
52
|
-
}
|
package/build/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/prebuilt/js/design-tokens.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * This file is generated by the @terrazzo/plugin-known-wpds-css-variables plugin.\n * Do not edit this file directly.\n */\n\nexport default [\n\t'--wpds-border-radius-surface-xs',\n\t'--wpds-border-radius-surface-sm',\n\t'--wpds-border-radius-surface-md',\n\t'--wpds-border-radius-surface-lg',\n\t'--wpds-border-width-surface-xs',\n\t'--wpds-border-width-surface-sm',\n\t'--wpds-border-width-surface-md',\n\t'--wpds-border-width-surface-lg',\n\t'--wpds-border-width-interactive-focus',\n\t'--wpds-color-bg-surface-neutral',\n\t'--wpds-color-bg-surface-neutral-strong',\n\t'--wpds-color-bg-surface-neutral-weak',\n\t'--wpds-color-bg-surface-brand',\n\t'--wpds-color-bg-surface-success',\n\t'--wpds-color-bg-surface-success-weak',\n\t'--wpds-color-bg-surface-info',\n\t'--wpds-color-bg-surface-info-weak',\n\t'--wpds-color-bg-surface-warning',\n\t'--wpds-color-bg-surface-warning-weak',\n\t'--wpds-color-bg-surface-caution',\n\t'--wpds-color-bg-surface-caution-weak',\n\t'--wpds-color-bg-surface-error',\n\t'--wpds-color-bg-surface-error-weak',\n\t'--wpds-color-bg-interactive-neutral',\n\t'--wpds-color-bg-interactive-neutral-active',\n\t'--wpds-color-bg-interactive-neutral-disabled',\n\t'--wpds-color-bg-interactive-neutral-strong',\n\t'--wpds-color-bg-interactive-neutral-strong-active',\n\t'--wpds-color-bg-interactive-neutral-strong-disabled',\n\t'--wpds-color-bg-interactive-neutral-weak',\n\t'--wpds-color-bg-interactive-neutral-weak-active',\n\t'--wpds-color-bg-interactive-neutral-weak-disabled',\n\t'--wpds-color-bg-interactive-brand',\n\t'--wpds-color-bg-interactive-brand-active',\n\t'--wpds-color-bg-interactive-brand-disabled',\n\t'--wpds-color-bg-interactive-brand-strong',\n\t'--wpds-color-bg-interactive-brand-strong-active',\n\t'--wpds-color-bg-interactive-brand-strong-disabled',\n\t'--wpds-color-bg-interactive-brand-weak',\n\t'--wpds-color-bg-interactive-brand-weak-active',\n\t'--wpds-color-bg-interactive-brand-weak-disabled',\n\t'--wpds-color-bg-track-neutral-weak',\n\t'--wpds-color-bg-track-neutral',\n\t'--wpds-color-bg-thumb-neutral-weak',\n\t'--wpds-color-bg-thumb-neutral-weak-active',\n\t'--wpds-color-bg-thumb-brand',\n\t'--wpds-color-bg-thumb-brand-active',\n\t'--wpds-color-bg-thumb-brand-disabled',\n\t'--wpds-color-fg-content-neutral',\n\t'--wpds-color-fg-content-neutral-weak',\n\t'--wpds-color-fg-content-success',\n\t'--wpds-color-fg-content-success-weak',\n\t'--wpds-color-fg-content-info',\n\t'--wpds-color-fg-content-info-weak',\n\t'--wpds-color-fg-content-warning',\n\t'--wpds-color-fg-content-warning-weak',\n\t'--wpds-color-fg-content-caution',\n\t'--wpds-color-fg-content-caution-weak',\n\t'--wpds-color-fg-content-error',\n\t'--wpds-color-fg-content-error-weak',\n\t'--wpds-color-fg-interactive-neutral',\n\t'--wpds-color-fg-interactive-neutral-active',\n\t'--wpds-color-fg-interactive-neutral-disabled',\n\t'--wpds-color-fg-interactive-neutral-strong',\n\t'--wpds-color-fg-interactive-neutral-strong-active',\n\t'--wpds-color-fg-interactive-neutral-strong-disabled',\n\t'--wpds-color-fg-interactive-neutral-weak',\n\t'--wpds-color-fg-interactive-neutral-weak-disabled',\n\t'--wpds-color-fg-interactive-brand',\n\t'--wpds-color-fg-interactive-brand-active',\n\t'--wpds-color-fg-interactive-brand-disabled',\n\t'--wpds-color-fg-interactive-brand-strong',\n\t'--wpds-color-fg-interactive-brand-strong-active',\n\t'--wpds-color-fg-interactive-brand-strong-disabled',\n\t'--wpds-color-stroke-surface-neutral',\n\t'--wpds-color-stroke-surface-neutral-weak',\n\t'--wpds-color-stroke-surface-neutral-strong',\n\t'--wpds-color-stroke-surface-brand',\n\t'--wpds-color-stroke-surface-brand-strong',\n\t'--wpds-color-stroke-surface-success',\n\t'--wpds-color-stroke-surface-success-strong',\n\t'--wpds-color-stroke-surface-info',\n\t'--wpds-color-stroke-surface-info-strong',\n\t'--wpds-color-stroke-surface-warning',\n\t'--wpds-color-stroke-surface-warning-strong',\n\t'--wpds-color-stroke-surface-error',\n\t'--wpds-color-stroke-surface-error-strong',\n\t'--wpds-color-stroke-interactive-neutral',\n\t'--wpds-color-stroke-interactive-neutral-active',\n\t'--wpds-color-stroke-interactive-neutral-disabled',\n\t'--wpds-color-stroke-interactive-neutral-strong',\n\t'--wpds-color-stroke-interactive-brand',\n\t'--wpds-color-stroke-interactive-brand-active',\n\t'--wpds-color-stroke-interactive-brand-disabled',\n\t'--wpds-color-stroke-interactive-error-strong',\n\t'--wpds-color-stroke-focus-brand',\n\t'--wpds-dimension-base',\n\t'--wpds-dimension-padding-surface-2xs',\n\t'--wpds-dimension-padding-surface-xs',\n\t'--wpds-dimension-padding-surface-sm',\n\t'--wpds-dimension-padding-surface-md',\n\t'--wpds-dimension-padding-surface-lg',\n\t'--wpds-dimension-gap-2xs',\n\t'--wpds-dimension-gap-xs',\n\t'--wpds-dimension-gap-sm',\n\t'--wpds-dimension-gap-md',\n\t'--wpds-dimension-gap-lg',\n\t'--wpds-dimension-gap-xl',\n\t'--wpds-elevation-x-small',\n\t'--wpds-elevation-small',\n\t'--wpds-elevation-medium',\n\t'--wpds-elevation-large',\n\t'--wpds-font-family-heading',\n\t'--wpds-font-family-body',\n\t'--wpds-font-family-mono',\n\t'--wpds-font-size-x-small',\n\t'--wpds-font-size-small',\n\t'--wpds-font-size-medium',\n\t'--wpds-font-size-large',\n\t'--wpds-font-size-x-large',\n\t'--wpds-font-size-2x-large',\n\t'--wpds-font-line-height-x-small',\n\t'--wpds-font-line-height-small',\n\t'--wpds-font-line-height-medium',\n\t'--wpds-font-line-height-large',\n\t'--wpds-font-line-height-x-large',\n\t'--wpds-font-line-height-2x-large',\n];\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,IAAO,wBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|