Figma token name transformer (#698)

* added transformer that changes specific token names to be better represented in figma * Update tidy-readers-type.md
primer · Jul 21, 2023 · 870cc60 · 870cc60
1 parent a911592
commit 870cc60
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 21 deletions.
diff --git a/.changeset/tidy-readers-type.md b/.changeset/tidy-readers-type.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Update figma token names & rename `fgColor-link-rest` to `fgColor-link` 
diff --git a/src/PrimerStyleDictionary.ts b/src/PrimerStyleDictionary.ts
@@ -19,6 +19,7 @@ import {
   colorToRgbaFloat,
   namePathToSlashNotation,
   figmaAttributes,
+  namePathToFigma,
 } from './transformers'
 import {
   scssMixinCssVariables,
@@ -154,11 +155,21 @@ StyleDictionary.registerTransform({
   ...jsonDeprecated,
 })
 
+StyleDictionary.registerTransform({
+  name: 'name/pathToCamelCase',
+  ...namePathToCamelCase,
+})
+
 StyleDictionary.registerTransform({
   name: 'name/pathToDotNotation',
   ...namePathToDotNotation,
 })
 
+StyleDictionary.registerTransform({
+  name: 'name/pathToFigma',
+  ...namePathToFigma,
+})
+
 StyleDictionary.registerTransform({
   name: 'name/pathToCamelCase',
   ...namePathToCamelCase,

diff --git a/src/platforms/figma.ts b/src/platforms/figma.ts
@@ -22,7 +22,8 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
   buildPath,
   transforms: [
     'color/rgbaFloat',
-    'name/pathToSlashNotation',
+    'name/pathToFigma',
+    // 'name/pathToSlashNotation',
     'figma/attributes',
     'dimension/pixelUnitless',
     // 'border/figma',

diff --git a/src/tokens/functional/color/dark/primitives-dark.json5 b/src/tokens/functional/color/dark/primitives-dark.json5
@@ -53,15 +53,13 @@
       },
     },
     link: {
-      rest: {
-        $value: '{fgColor.accent}',
-        $type: 'color',
-        $extensions: {
-          'org.primer.figma': {
-            collection: 'mode',
-            mode: 'dark',
-            scopes: ['fgColor'],
-          },
+      $value: '{fgColor.accent}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          scopes: ['fgColor'],
         },
       },
     },

diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5
@@ -49,15 +49,13 @@
       },
     },
     link: {
-      rest: {
-        $value: '{fgColor.accent}',
-        $type: 'color',
-        $extensions: {
-          'org.primer.figma': {
-            collection: 'mode',
-            mode: 'light',
-            scopes: ['fgColor'],
-          },
+      $value: '{fgColor.accent}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          scopes: ['fgColor'],
         },
       },
     },

diff --git a/src/transformers/index.ts b/src/transformers/index.ts
@@ -10,8 +10,9 @@ export {figmaAttributes} from './figmaAttributes'
 export {fontFamilyToCss} from './fontFamilyToCss'
 export {fontWeightToNumber} from './fontWeightToNumber'
 export {jsonDeprecated} from './jsonDeprecated'
-export {namePathToDotNotation} from './namePathToDotNotation'
 export {namePathToCamelCase} from './namePathToCamelCase'
+export {namePathToDotNotation} from './namePathToDotNotation'
+export {namePathToFigma} from './namePathToFigma'
 export {namePathToKebabCase} from './namePathToKebabCase'
 export {namePathToSlashNotation} from './namePathToSlashNotation'
 export {shadowToCss} from './shadowToCss'

diff --git a/src/transformers/namePathToDotNotation.ts b/src/transformers/namePathToDotNotation.ts
@@ -18,7 +18,7 @@ const camelCase = (string: string): string => {
  * @description converts the [TransformedToken's](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts) `.path` array to a dot.notation string
  * @type name transformer — [StyleDictionary.NameTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
  * @matcher omitted to match all tokens
- * @transformer returns `string` on dot.notation
+ * @transformer returns `string` in dot.notation
  */
 export const namePathToDotNotation: StyleDictionary.Transform = {
   type: `name`,

diff --git a/src/transformers/namePathToFigma.ts b/src/transformers/namePathToFigma.ts
@@ -0,0 +1,23 @@
+import type StyleDictionary from 'style-dictionary'
+
+/**
+ * @description converts the [TransformedToken's](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts) `.path` array to a specific figma name
+ * @type name transformer — [StyleDictionary.NameTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher omitted to match all tokens
+ * @transformer returns `string`
+ */
+export const namePathToFigma: StyleDictionary.Transform = {
+  type: `name`,
+  transformer: (token: StyleDictionary.TransformedToken, options?: StyleDictionary.Platform): string => {
+    let pathArray = token.path
+    if (['fgColor', 'borderColor', 'bgColor'].includes(pathArray[0]) && pathArray.length === 3) {
+      pathArray = [pathArray[0], `${pathArray[1]}-${pathArray[2]}`]
+    }
+    return (
+      [options?.prefix, ...pathArray]
+        // remove undefined if exists
+        .filter((part: unknown): part is string => typeof part === 'string')
+        .join('/')
+    )
+  },
+}