figma-tokens-flattener 1.0.16 → 1.0.18

package/consts.js

@@ -0,0 +1,3 @@
+const REUSED_KEYS = ["lineType", "fontWeightItalic", "boxShadow", "boxShadowSecondary", "boxShadowTertiary", "focusPrimary", "focusError", "focusWarning", "colorMenuDarkBg", "colorMenuSubItemBg"];
+
+module.exports = REUSED_KEYS;

package/index.js

@@ -2,6 +2,7 @@
 
 const fs = require('fs');
 const path = require('path');
+const REUSED_KEYS = require('./consts.js');
 
 /* Color */
 function flattenColorGroups(colorGroups) {
@@ -393,10 +394,16 @@ function flattenComponentsTokens(componentsTokens, contextTokens) {
         Object.keys(componentTokens).forEach(tokenName => {
             const tokenDefinition = componentTokens[tokenName];
 
-            if (tokenDefinition && typeof tokenDefinition === 'object' && Object.hasOwn(tokenDefinition, 'value')) {
-                const rawValue = tokenDefinition.value;
+            if (tokenDefinition && typeof tokenDefinition === 'object') {
+                let rawValueToProcess;
 
-                const processedValue = flattenMapTokens(rawValue, contextTokens);
+                if (Object.hasOwn(tokenDefinition, 'value') && typeof tokenDefinition.value === 'object' && tokenDefinition.value !== null && Object.hasOwn(tokenDefinition.value, 'style')) {
+                    rawValueToProcess = tokenDefinition.value.style;
+                }
+                else if (Object.hasOwn(tokenDefinition, 'value')) {
+                    rawValueToProcess = tokenDefinition.value;
+                }
+                const processedValue = flattenMapTokens(rawValueToProcess, contextTokens);
                 processedComponentTokens[tokenName] = processedValue;
             } else {
                 console.warn(`Unsupported token structure ${componentName}.${tokenName}:`, tokenDefinition);
@@ -410,6 +417,22 @@ function flattenComponentsTokens(componentsTokens, contextTokens) {
     return flattened;
 }
 
+function addReusedTokens(lightTokens, darkTokens) {
+    const reusedCollection = {};
+
+    Object.keys(lightTokens).forEach((key) => {
+        const value = lightTokens[key];
+
+        if (typeof value === 'number' || REUSED_KEYS.includes(key)) {
+            reusedCollection[key] = value;
+        }
+
+    });
+
+    // darkTokens will take precedence in case of a key match.
+    return { ...darkTokens, ...reusedCollection };
+}
+
 function flatten() {
     const configFilePath = path.resolve('./figma-tokens-flattener-config.json');
     let config = {};
@@ -503,6 +526,10 @@ function flatten() {
                     const flattenDefaultValues = flattenDefaultValueTokens(allTokensData[darkDefaultKey]);
                     darkTokens = { ...flattenDefaultValues, ...darkTokens };
 
+                    // The tokens of the light theme contain numeric values, while the dark theme does not contain them to avoid duplication.
+                    // Need to add these values, and some lines (shadows, focus, etc.) because only the light theme has them too.
+                    darkTokens = addReusedTokens(lightTokens, darkTokens);
+
                     const flattenedComponents = flattenComponentsTokens(allTokensData[darkFullKey], darkTokens);
                     darkTokens = { ...darkTokens, components: flattenedComponents };
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-tokens-flattener",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "A tool for transforming Ant Design tokens from Tokens Studio for Figma (Single file) into flat style mappings for light and dark themes.",
   "main": "index.js",
     "bin": {