figma-tokens-flattener 1.0.15 → 1.0.17

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) {
@@ -410,6 +411,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 = {};
@@ -444,7 +461,7 @@ function flatten() {
             const lightDefaultKey = `Default/Light`;
             const darkDefaultKey = `Default/Dark`;
 
-            //  _____________________________Обработка light токенов
+            //Processing of light tokens
             if (allTokensData.hasOwnProperty(lightFullKey)) {
                 // Special processing transformation of each collection into a flat structure
 
@@ -478,7 +495,7 @@ function flatten() {
                 console.warn(`Collection not found, collection key: ${lightFullKey}`);
             }
 
-            // _____________________________Обработка dark токенов
+            //Processing of dark tokens
             if (allTokensData.hasOwnProperty(darkFullKey)) {
 
                 if (baseKey === 'colors') {
@@ -503,6 +520,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 };
                 }
@@ -533,8 +554,4 @@ function flatten() {
     }
 };
 
-// module.exports = {
-//     flatten
-// };
-
 flatten();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "figma-tokens-flattener",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "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": {