diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts index ad94350cd..3c206d750 100644 --- a/scripts/buildTokens.ts +++ b/scripts/buildTokens.ts @@ -112,6 +112,29 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void => getStyleDictionaryConfig(`base/typography/typography`, [`src/tokens/base/typography/*.json`], [], buildOptions), ).buildAllPlatforms() + /** ----------------------------------- + * Motion tokens + * ----------------------------------- */ + PrimerStyleDictionary.extend( + getStyleDictionaryConfig( + `functional/motion/motion`, + [`src/tokens/functional/motion/*.json5`], + [`src/tokens/base/motion/*.json5`], + buildOptions, + { + css: css(`css/functional/motion/motion.css`, buildOptions.prefix, buildOptions.buildPath, { + options: { + outputReferences: true, + }, + }), + }, + ), + ).buildAllPlatforms() + + PrimerStyleDictionary.extend( + getStyleDictionaryConfig(`base/motion/motion`, [`src/tokens/base/motion/*.json5`], [], buildOptions), + ).buildAllPlatforms() + /** ----------------------------------- * deprecated tokens * ----------------------------------- */ @@ -139,6 +162,12 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void => source: [`src/tokens/base/size/*.json`, `src/tokens/functional/size/*.json`], include: [`src/tokens/base/size/*.json`], }, + // motion + { + filename: 'motion', + source: [`src/tokens/base/motion/*.json5`, `src/tokens/functional/motion/*.json5`], + include: [`src/tokens/base/motion/*.json5`], + }, ] // for (const {filename, source, include} of deprecatedBuilds) { diff --git a/src/platforms/css.ts b/src/platforms/css.ts index 99b4a74da..b58005ea4 100644 --- a/src/platforms/css.ts +++ b/src/platforms/css.ts @@ -27,6 +27,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options) 'color/hexAlpha', 'color/hexMix', 'dimension/rem', + 'duration/css', 'shadow/css', 'border/css', 'typography/css', diff --git a/src/platforms/scss.ts b/src/platforms/scss.ts index 3a5960cac..86fabeed5 100644 --- a/src/platforms/scss.ts +++ b/src/platforms/scss.ts @@ -24,6 +24,7 @@ export const scss: PlatformInitializer = (outputFile, prefix, buildPath): StyleD 'color/hexMix', 'color/hexAlpha', 'dimension/rem', + 'duration/css', 'shadow/css', 'border/css', 'typography/css', diff --git a/src/transformers/durationToCss.ts b/src/transformers/durationToCss.ts index b8bc32709..ed7cd260e 100644 --- a/src/transformers/durationToCss.ts +++ b/src/transformers/durationToCss.ts @@ -9,7 +9,7 @@ import type StyleDictionary from 'style-dictionary' export const durationToCss: StyleDictionary.Transform = { type: `value`, transitive: true, - matcher: (token: StyleDictionary.TransformedToken) => token.type === `duration`, + matcher: (token: StyleDictionary.TransformedToken) => token.$type === `duration`, transformer: (token: StyleDictionary.TransformedToken, _options?: StyleDictionary.Platform) => { // throw an error if token value is not a string or does not end with `ms` if (typeof token.value !== `string` || !token.value.endsWith(`ms`)) {