working on motion

.changeset/thin-birds-hang.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+Adding motion tokens

scripts/buildTokens.ts

@@ -29,8 +29,8 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = (
   source, // build the special formats
   include,
   log: {
-    warnings: 'warn', // 'warn' | 'error' | 'disabled'
-    verbosity: 'verbose', // 'default' | 'silent' | 'verbose'
+    warnings: 'disabled', // 'warn' | 'error' | 'disabled'
+    verbosity: 'silent', // 'default' | 'silent' | 'verbose'
     errors: {
       brokenReferences: 'throw', // 'throw' | 'console'
     },
@@ -157,7 +157,11 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
     const extendedSD = await PrimerStyleDictionary.extend(
       getStyleDictionaryConfig(
         `functional/motion/motion`,
-        [`src/tokens/functional/motion/*.json5`],
+        [
+          `src/tokens/functional/motion/*.json5`,
+          `src/tokens/base/motion/timing.json5`,
+          `src/tokens/base/motion/easing.json5`,
+        ],
         [`src/tokens/base/motion/*.json5`],
         buildOptions,
         {

src/PrimerStyleDictionary.ts

@@ -127,6 +127,10 @@ PrimerStyleDictionary.registerTransform({
   ...floatToPixelUnitless,
 })
 
+PrimerStyleDictionary.registerTransform({
+  ...cubicBezierToCss,
+})
+
 PrimerStyleDictionary.registerTransform({
   ...dimensionToRem,
 })

src/schemas/designToken.ts

@@ -33,7 +33,6 @@ export const designToken = z.record(
         durationToken,
         stringToken,
       ]),
-      // referenceToken,
       designToken,
     ])
   }),

src/tokens/base/motion/easing.json5

@@ -0,0 +1,26 @@
+{
+  base: {
+    easing: {
+      linear: {
+        $value: [0, 0, 1, 1],
+        $type: 'cubicBezier',
+        $description: 'Ideal for non-movement properties, like opacity or background color.',
+      },
+      easeIn: {
+        $value: [0.4, 0.1, 0.75, 0.95],
+        $type: 'cubicBezier',
+        $description: 'Ideal for movement that starts on the page and ends off the page.',
+      },
+      easeOut: {
+        $value: [0, 0, 0.3, 0.95],
+        $type: 'cubicBezier',
+        $description: 'Ideal for movement that starts off the page and ends on the page.',
+      },
+      easeInOut: {
+        $value: [0.4, 0.1, 0.3, 1],
+        $type: 'cubicBezier',
+        $description: 'Ideal for movement that starts and ends on the page.',
+      },
+    },
+  },
+}

src/tokens/base/motion/timing.json5

@@ -0,0 +1,44 @@
+{
+  base: {
+    duration: {
+      instant: {
+        $value: '75ms',
+        $type: 'duration',
+      },
+      fast: {
+        $value: '200ms',
+        $type: 'duration',
+      },
+      default: {
+        $value: '300ms',
+        $type: 'duration',
+      },
+      slow: {
+        $value: '400ms',
+        $type: 'duration',
+      },
+    },
+    delay: {
+      none: {
+        $value: '0ms',
+        $type: 'duration',
+      },
+      instant: {
+        $value: '{base.duration.instant}',
+        $type: 'duration',
+      },
+      fast: {
+        $value: '{base.duration.fast}',
+        $type: 'duration',
+      },
+      default: {
+        $value: '{base.duration.default}',
+        $type: 'duration',
+      },
+      slow: {
+        $value: '{base.duration.slow}',
+        $type: 'duration',
+      },
+    },
+  },
+}

src/tokens/functional/motion/motion.json5

@@ -0,0 +1,24 @@
+{
+  easing: {
+    entrance: {
+      $value: '{base.easing.easeOut}',
+      $type: 'cubicBezier',
+      $description: 'Ideal for movement that starts off the page and ends on the page.',
+    },
+    exit: {
+      $value: '{base.easing.easeIn}',
+      $type: 'cubicBezier',
+      $description: 'Ideal for movement that starts on the page and ends off the page.',
+    },
+    move: {
+      $value: '{base.easing.easeInOut}',
+      $type: 'cubicBezier',
+      $description: 'Ideal for movement that starts and ends on the page.',
+    },
+    static: {
+      $value: '{base.easing.linear}',
+      $type: 'cubicBezier',
+      $description: 'Ideal for non-movement properties, like opacity or background color.',
+    },
+  },
+}