add duration transformation

primer · Oct 5, 2023 · 923b2cb · 923b2cb
1 parent 9308e89
commit 923b2cb
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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`)) {