Adding base motion tokens for duration and easing (#1080)

* working on motion

* vrt fix

* fix for durations in seconds

* fix test

* rm duplicate output

* add missing references

Author: lukasoppermann

.changeset/thin-birds-hang.md

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

.github/workflows/visual_regression_test.yml

@@ -44,7 +44,7 @@ jobs:
           sleep 5
 
       - name: Run Visual Regression Tests
-        uses: docker://mcr.microsoft.com/playwright:v1.47.1-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.49.0-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:

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/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.7, 0.1, 0.75, 0.9],
+        $type: 'cubicBezier',
+        $description: 'Ideal for movement that starts on the page and ends off the page.',
+      },
+      easeOut: {
+        $value: [0.16, 1, 0.3, 1],
+        $type: 'cubicBezier',
+        $description: 'Ideal for movement that starts off the page and ends on the page.',
+      },
+      easeInOut: {
+        $value: [0.6, 0, 0.2, 1],
+        $type: 'cubicBezier',
+        $description: 'Ideal for movement that starts and ends on the page.',
+      },
+    },
+  },
+}

src/tokens/base/motion/timing.json5

@@ -0,0 +1,50 @@
+{
+  base: {
+    duration: {
+      '0': {
+        $value: '0ms',
+        $type: 'duration',
+      },
+      '75': {
+        $value: '75ms',
+        $type: 'duration',
+      },
+      '200': {
+        $value: '200ms',
+        $type: 'duration',
+      },
+      '300': {
+        $value: '300ms',
+        $type: 'duration',
+      },
+      '400': {
+        $value: '400ms',
+        $type: 'duration',
+      },
+      '500': {
+        $value: '500ms',
+        $type: 'duration',
+      },
+      '600': {
+        $value: '600ms',
+        $type: 'duration',
+      },
+      '700': {
+        $value: '700ms',
+        $type: 'duration',
+      },
+      '800': {
+        $value: '800ms',
+        $type: 'duration',
+      },
+      '900': {
+        $value: '900ms',
+        $type: 'duration',
+      },
+      '1000': {
+        $value: '1000ms',
+        $type: 'duration',
+      },
+    },
+  },
+}

src/tokens/functional/motion/loading.json5

@@ -7,7 +7,7 @@
     loading: {
       delay: {
         default: {
-          $value: '1000ms',
+          $value: '{base.duration.1000}',
           $type: 'duration',
           $description: 'The amount of time to wait before showing a loading indicator or announcing a loading state to assistive technologies.',
         },

src/tokens/functional/motion/patterns.json5

@@ -7,17 +7,24 @@
     spinner: {
       duration: {
         rotation: {
-          $value: '1000ms',
+          $value: '{base.duration.1000}',
           $type: 'duration',
           $description: 'The amount of time it takes the "Spinner" loading indicator to make a full 360deg rotation',
         },
       },
+      easing: {
+        rotation: {
+          $value: '{base.easing.linear}',
+          $type: 'cubicBezier',
+          $description: 'The easing curve for the "Spinner" loading indicator rotation',
+        },
+      },
     },
     skeletonLoader: {
       shimmer: {
         duration: {
           scale: {
-            $value: '1000ms',
+            $value: '{base.duration.1000}',
             $type: 'duration',
             $description: 'The amount of times it takes the "shimmer" effect to go from the start (left) of the skeleton loader to the end (right)',
           },

src/transformers/durationToCss.test.ts

@@ -36,7 +36,7 @@ describe('Transformer: durationToCss', () => {
     expect(() =>
       durationToCss.transform(
         getMockToken({
-          value: '1s',
+          value: '1sec',
         }),
         {},
         {},

src/transformers/durationToCss.ts

@@ -15,8 +15,10 @@ export const durationToCss: Transform = {
   transform: (token: TransformedToken, _config: PlatformConfig, options: Config) => {
     const valueProp = options.usesDtcg ? '$value' : 'value'
     // throw an error if token value is not a string or does not end with `ms`
-    if (typeof token[valueProp] !== `string` || !token[valueProp].endsWith(`ms`)) {
-      throw new Error(`duration token value must be a string with an "ms" unit`)
+    if (typeof token[valueProp] !== `string` || !(token[valueProp].endsWith(`ms`) || token[valueProp].endsWith(`s`))) {
+      throw new Error(
+        `duration token value must be a string with an "ms" || "s" unit, invalid token: ${token.name} with value: ${token[valueProp]}`,
+      )
     }
     // get value
     let value = parseInt(token[valueProp].replace('ms', ''))