chore(spindle-tokens): export design token with Figma variables

packages/spindle-tokens/.stylelintrc.json

@@ -5,6 +5,7 @@
     "alpha-value-notation": "number",
     "declaration-property-value-allowed-list": {
       "/^--animation-easing-/": "/^cubic-bezier\\([\\d.]+, [\\d.]+, [\\d.]+, [\\d.]+\\)/"
-    }
+    },
+    "color-hex-length": "long"
   }
 }

packages/spindle-tokens/config.js

@@ -1,27 +1,61 @@
-module.exports = {
-  source: [`tokens/**/!(*.css).json`],
-  format: {
-    jsonDataSource: ({ dictionary }) => {
-      // Flatten data to be a data source of some querying use cases
-      // Stringify the child values to ensure the types are the same, but original.value keeps their type
-      const tokens = dictionary.allTokens.map((token) => ({
-        ...token,
-        value: `${token.value}`, // ensure the value type is string
-        pathString: token.path.join('.'), // useful for filtering the token
-      }));
-      return JSON.stringify(tokens, null, 2);
-    },
+const transitionFilter = {
+  name: 'transition',
+  filter: async (token) => {
+    return token.$type === 'transition' || token.$type === 'cubicBezier';
+  },
+};
+
+const primitiveColorFilter = {
+  name: 'primitive-color',
+  filter: async (token) => {
+    return token.filePath.endsWith('primitive-color.tokens.json');
+  },
+};
+
+const themeLightFilter = {
+  name: 'theme-light',
+  filter: async (token) => {
+    return token.filePath.endsWith('theme-light.tokens.json');
+  },
+};
+
+const themeDarkFilter = {
+  name: 'theme-dark',
+  filter: async (token) => {
+    return token.filePath.endsWith('theme-dark.tokens.json');
   },
+};
+
+// Using dynamic import until ESM is supported in this repogitory
+import('style-dictionary').then((module) => {
+  const StyleDictionary = module.default;
+  StyleDictionary.registerFilter(transitionFilter);
+  StyleDictionary.registerFilter(primitiveColorFilter);
+  StyleDictionary.registerFilter(themeLightFilter);
+  StyleDictionary.registerFilter(themeDarkFilter);
+});
+
+module.exports = {
+  source: [`tokens/**/*.tokens.json`],
   platforms: {
-    json: {
+    css: {
+      transformGroup: 'css',
       files: [
         {
-          destination: 'dist/json/spindle-tokens.json',
-          format: 'json',
+          destination: 'dist/css/spindle-tokens-animation.css',
+          format: 'css/variables',
+          options: {
+            outputReferences: true,
+          },
+          filter: 'transition',
         },
         {
-          destination: 'dist/json/spindle-tokens-flat.json',
-          format: 'jsonDataSource',
+          destination: 'dist/css/spindle-tokens.css',
+          format: 'css/variables',
+          options: {
+            outputReferences: true,
+          },
+          filter: 'transition',
         },
       ],
     },

packages/spindle-tokens/lib/animation-response.json

@@ -0,0 +1,137 @@
+{
+  "status": 200,
+  "error": false,
+  "meta": {
+    "variableCollections": {
+      "VariableCollectionId:1:28": {
+        "defaultModeId": "1:0",
+        "id": "VariableCollectionId:1:28",
+        "name": "Animation Property",
+        "remote": false,
+        "modes": [
+          {
+            "modeId": "1:0",
+            "name": "Mode 1"
+          }
+        ],
+        "key": "eb62ada576e591a0c3574220cef976e5f0d05088",
+        "hiddenFromPublishing": false,
+        "variableIds": [
+          "VariableID:1:29",
+          "VariableID:1:32"
+        ]
+      },
+      "VariableCollectionId:1:35": {
+        "defaultModeId": "1:1",
+        "id": "VariableCollectionId:1:35",
+        "name": "Animation",
+        "remote": false,
+        "modes": [
+          {
+            "modeId": "1:1",
+            "name": "Mode 1"
+          }
+        ],
+        "key": "17df3e6309aee435dbfda6b0b07bce80ff4f3e23",
+        "hiddenFromPublishing": false,
+        "variableIds": [
+          "VariableID:1:37",
+          "VariableID:1:38"
+        ]
+      }
+    },
+  "variables": {
+    "VariableID:1:29": {
+      "id": "VariableID:1:29",
+      "name": "Easing/Ease Out",
+      "remote": false,
+      "key": "3fca60793a42018ca2054c2df23c17b26ad3bd1e",
+      "variableCollectionId": "VariableCollectionId:1:28",
+      "resolvedType": "STRING",
+      "description": "",
+      "hiddenFromPublishing": false,
+      "valuesByMode": {
+        "1:0": "[0,0,0,1]"
+      },
+      "scopes": [
+        "ALL_SCOPES"
+      ],
+      "codeSyntax": {}
+    },
+    "VariableID:1:32": {
+      "id": "VariableID:1:32",
+      "name": "Duration/Fast",
+      "remote": false,
+      "key": "a5db0d4a42b1890a9d71bf0674d68b2faf5a3463",
+      "variableCollectionId": "VariableCollectionId:1:28",
+      "resolvedType": "STRING",
+      "description": "",
+      "hiddenFromPublishing": false,
+      "valuesByMode": {
+        "1:0": "150ms"
+      },
+      "scopes": [
+        "ALL_SCOPES"
+      ],
+      "codeSyntax": {}
+    },
+    "VariableID:1:37": {
+      "id": "VariableID:1:37",
+      "name": "Move/Easing",
+      "remote": false,
+      "key": "4ab6da23a8dc80b44a1872a23c80b0863550fd3e",
+      "variableCollectionId": "VariableCollectionId:1:35",
+      "resolvedType": "STRING",
+      "description": "",
+      "hiddenFromPublishing": false,
+      "valuesByMode": {
+        "1:1": {
+          "type": "VARIABLE_ALIAS",
+          "id": "VariableID:1:29"
+        }
+      },
+      "scopes": [
+        "ALL_SCOPES"
+      ],
+      "codeSyntax": {}
+    },
+    "VariableID:1:38": {
+      "id": "VariableID:1:38",
+      "name": "Move/Duration",
+      "remote": false,
+      "key": "2103542e02f6289ce3ff6aedfceb9fe10c0c75bb",
+      "variableCollectionId": "VariableCollectionId:1:35",
+      "resolvedType": "STRING",
+      "description": "",
+      "hiddenFromPublishing": false,
+      "valuesByMode": {
+        "1:1": {
+          "type": "VARIABLE_ALIAS",
+          "id": "VariableID:1:33"
+        }
+      },
+      "scopes": [
+        "ALL_SCOPES"
+      ],
+      "codeSyntax": {}
+    },
+    "VariableID:1:33": {
+        "id": "VariableID:1:33",
+        "name": "Duration/Neutral",
+        "remote": false,
+        "key": "0f62f41685a787f14e972ad58dccaa5978da10eb",
+        "variableCollectionId": "VariableCollectionId:1:28",
+        "resolvedType": "STRING",
+        "description": "",
+        "hiddenFromPublishing": false,
+        "valuesByMode": {
+          "1:0": "350ms"
+        },
+        "scopes": [
+          "ALL_SCOPES"
+        ],
+        "codeSyntax": {}
+      }
+  }
+}
+}

packages/spindle-tokens/lib/animation-transformer.test.ts

@@ -0,0 +1,35 @@
+import {
+  transformAnimation,
+  transformAnimationProperty,
+} from './animation-transformer';
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const animationResponse = require('./animation-response.json');
+
+describe('transform Animation', () => {
+  it('should transform animation properties correctly', () => {
+    const variables = animationResponse;
+    const transformedProperties = transformAnimationProperty(variables);
+
+    expect(transformedProperties).toEqual({
+      'Easing/Ease Out': { $type: 'cubicBezier', $value: [0, 0, 0, 1] },
+      'Duration/Fast': { $type: 'transition', $value: '150ms' },
+    });
+  });
+
+  it('should transform animation correctly', () => {
+    const variables = animationResponse;
+    const transformedProperties = transformAnimation(variables);
+
+    expect(transformedProperties).toEqual({
+      'Move/Easing': {
+        $type: 'transition',
+        $value: '{Animation.Easing/Ease Out}',
+      },
+      'Move/Duration': {
+        $type: 'transition',
+        $value: '{Animation.Duration/Neutral}',
+      },
+    });
+  });
+});

packages/spindle-tokens/lib/animation-transformer.ts

@@ -0,0 +1,59 @@
+import { GetLocalVariablesResponse, VariableAlias } from '@figma/rest-api-spec';
+
+export function transformAnimationProperty(
+  variables: GetLocalVariablesResponse,
+) {
+  const animationPropertyCollections = Object.values(
+    variables.meta.variableCollections,
+  ).filter((value) => {
+    return value.name === 'Animation Property';
+  })[0];
+
+  const animationPropertyResult: { [key: string]: { [key: string]: string } } =
+    {};
+
+  animationPropertyCollections.variableIds.forEach((variableId) => {
+    const variable = variables.meta.variables[variableId];
+    const isEasing = variable.name.startsWith('Easing');
+    const value = isEasing
+      ? JSON.parse(Object.values(variable.valuesByMode)[0] as string)
+      : (Object.values(variable.valuesByMode)[0] as string);
+    const type = isEasing ? 'cubicBezier' : 'transition';
+    animationPropertyResult[variable.name] = {
+      $type: type,
+      $value: value,
+    };
+  });
+
+  return animationPropertyResult;
+}
+
+export function transformAnimation(variables: GetLocalVariablesResponse) {
+  const animationCollection = Object.values(
+    variables.meta.variableCollections,
+  ).filter((value) => {
+    return value.name === 'Animation';
+  })[0];
+
+  const animationResult: { [key: string]: { [key: string]: string } } = {};
+
+  animationCollection.variableIds.forEach((variableId) => {
+    const variable = variables.meta.variables[variableId];
+    const value = variable.valuesByMode[animationCollection.modes[0].modeId];
+
+    if (
+      (value as VariableAlias).type &&
+      (value as VariableAlias).type === 'VARIABLE_ALIAS'
+    ) {
+      const alias = value as VariableAlias;
+      const resolvedName = variables.meta.variables[alias.id].name;
+
+      animationResult[variable.name] = {
+        $type: 'transition',
+        $value: `{Animation.${resolvedName}}`,
+      };
+    }
+  });
+
+  return animationResult;
+}