feat(animation): export and transform animation tokens

README.md

@@ -6,7 +6,11 @@ Information about exporting tokens from the Figma Design Tokens & Styles library
 # Usage
 Once the design token JSON files are exported from Figma to the [tokens directories](https://github.com/patternfly/design-tokens/tree/main/packages/module/tokens), use `yarn build:scss` to build the SCSS files to the /build directory
 
-By default `yarn build:scss` outputs the SCSS with `:root` as a selector, but you can also pass the `--selector` flag (or just `-s` for short) and specify any selector you want, i.e. `yarn build:scss -s .foo` will replace the `:root` selector with `.foo` in the generated SCSS files. For PatternFly core, export with the selector `@mixin pf-v6-tokens`
+By default `yarn build:scss` outputs the SCSS with `:root` as a selector, but you can also pass the `--selector` flag (or just `-s` for short) and specify any selector you want, i.e. `yarn build:scss -s .foo` will replace the `:root` selector with `.foo` in the generated SCSS files. 
+
+To generate token variables for PatternFly core, use 
+
+    yarn build:scss -s "@mixin pf-v6-tokens"
 
 `yarn build:docs` and `yarn serve:docs` will build and run the docs locally.
 

packages/module/build.js

@@ -34,6 +34,15 @@ const build = (selector) => {
     transformer: (token) => `${token.value}px`
   });
 
+  StyleDictionary.registerTransform({
+    name: 'patternfly/global/ms',
+    type: 'value',
+    matcher: (token) =>
+      token.attributes.type === 'duration' ||
+      token.attributes.type === 'delay',
+    transformer: (token) => `${token.value}ms`
+  });
+
   StyleDictionary.registerTransform({
     name: 'patternfly/doublekebab',
     type: 'name',
@@ -53,6 +62,7 @@ const build = (selector) => {
       'color/css',
       // custom transforms
       'patternfly/global/px',
+      'patternfly/global/ms',
       'patternfly/doublekebab'
     ]
   });

packages/module/plugins/export-patternfly-tokens/README.md

@@ -3,20 +3,22 @@
 This plugin exports Patternfly tokens out of Figma and creates JSON files that can be added to the design tokens repo and processed by style dictionary.
 
 ### Setup
+**Note:** Edit access to the Figma file is required to run the exporter.
 1. Clone the [design-tokens](https://github.com/patternfly/design-tokens) repository.
-2. Open the Figma app.
-3. In Figma, select **Plugins** > **Development** > **Import plugin from manifest**.
-4. Browse to **design-tokens\packages\module\plugins\export-patternfly-tokens** and select the **manifest.json** file from your cloned design-tokens repository and click **Open**.
+1. Open the Figma app.
+1. In Figma, select **Plugins** > **Development** > **Import plugin from manifest**.
+1. Browse to **design-tokens\packages\module\plugins\export-patternfly-tokens** and select the **manifest.json** file from your cloned design-tokens repository and click **Open**.
 
 The Export Patternfly Tokens plugin should now be available to use as a development plugin in your Figma environment.
 
 ### Usage
 Once the plugin has been added to Figma via the manifest file:
+1. Make sure you are **not** in Figma's developer mode.
 1. In Figma, select **Plugins** > **Development** > **Export Patternfly Tokens** > **Export Tokens**.
-2. Click **Export Tokens**. The text area will display a concatenated list of all tokens exported from the Figma library. Links to each exported JSON file are displayed at the bottom of the dialog.
-3. Click each JSON file link to save them locally (do not rename the JSON files!).
-4. Copy the local JSON files to your cloned design-tokens repo:
-   1. Copy **base.dimension.json**, **base.json**, **semantic.dimension.json**, **semantic.json**, and **palette.color.json** to  **\packages\module\tokens\default**. 
-   2. Copy **base.dark.json**, **semantic.dark.json**, and **palette.color.json** to **\packages\module\tokens\dark** to **\packages\module\tokens\dark**.
+1. Click **Export Tokens**. The text area will display a concatenated list of all tokens exported from the Figma library. Links to each exported JSON file are displayed at the bottom of the dialog.
+1. Click each JSON file link to save them locally (do not rename the JSON files!).
+1. Copy the local JSON files to your cloned design-tokens repo:
+   1. Copy files that do not end in **.dark.json** to  **\packages\module\tokens\default**. 
+   1. Copy files ending in **.dark.json** and **palette.color.json** to **\packages\module\tokens\dark**.
 
    Note that **palette.color.json** is saved to both the **default** and **dark** directories.

packages/module/plugins/export-patternfly-tokens/export.html

@@ -154,6 +154,12 @@
             case "/* Charts.Dark.tokens.json */":
               saveFileName = "charts.dark.json";
               break;
+            case "/* Base Motion Tokens.Mode 1.tokens.json */":
+              saveFileName = "base.motion.json";
+              break;
+            case "/* Semantic Motion Tokens.Mode 1.tokens.json */":
+              saveFileName = "semantic.motion.json";
+              break;
             default:
                 saveFileName = splitFiles[i].split('\n', 1)[0]
           }