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/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.',
         },