feat: var references for all tokens

Author: NikGurev

packages/tokens-builder/configs/css.js

@@ -17,7 +17,8 @@ module.exports = {
                 filter: 'css-variables-light',
                 prefix: 'kbq',
                 options: {
-                    selector: '.kbq-light'
+                    selector: '.kbq-light',
+                    outputReferences: true
                 }
             },
             {
@@ -26,7 +27,8 @@ module.exports = {
                 filter: 'css-variables-dark',
                 prefix: 'kbq',
                 options: {
-                    selector: '.kbq-dark'
+                    selector: '.kbq-dark',
+                    outputReferences: true
                 }
             },
             {

packages/tokens-builder/filters/css-variables.js

@@ -15,12 +15,12 @@ module.exports = (StyleDictionary) => {
 
     StyleDictionary.registerFilter({
         name: 'css-variables-light',
-        matcher: (prop) => prop.attributes.light && !prop.attributes.palette
+        matcher: (prop) => prop.attributes.light
     });
 
     StyleDictionary.registerFilter({
         name: 'css-variables-dark',
-        matcher: (prop) => prop.attributes.dark && !prop.attributes.palette
+        matcher: (prop) => prop.attributes.dark
     });
 
     StyleDictionary.registerFilter({

packages/tokens-builder/formats/utils.js

@@ -1,4 +1,6 @@
 const transform = require('style-dictionary/lib/common/transforms');
+const getPathFromName = require('style-dictionary/lib/utils/references/getPathFromName');
+const createReferenceRegex = require('style-dictionary/lib/utils/references/createReferenceRegex');
 
 const unwrapObjectTransformer = (token) => {
     return Object.keys(token.value).map((key) => {
@@ -15,6 +17,18 @@ const unwrapObjectTransformer = (token) => {
     }, {});
 };
 
+const resolvePaletteRef = (token, dictionary) => {
+    const regex = createReferenceRegex({});
+
+    const findPalette = (match, variable) => {
+        const [category, item, ...pathName] = getPathFromName(variable);
+        const pathToSemanticPalette = dictionary.tokens[category][item].palette.original.value.replace(/[{}]/g, '');
+        return `{${pathToSemanticPalette}.${pathName[pathName.length - 1]}}`;
+    };
+    token.original.value = token.original.value.replace(regex, findPalette);
+    return token;
+};
+
 const getMapFromObj = (object) => {
     const result = Object.keys(object)
         .map((key) => {
@@ -29,7 +43,25 @@ const getMapFromObj = (object) => {
     return `(\n${result}\n)`;
 };
 
+const applyCustomTransformations = (dictionary) => {
+    dictionary.allProperties = dictionary.allTokens = dictionary.allTokens
+        .flatMap((token) => {
+            if (typeof token.value === 'object' && token.type === 'font') {
+                return unwrapObjectTransformer(token);
+            }
+            if (typeof token.original.value === 'string' && token.original.value.includes('palette.value')) {
+                return resolvePaletteRef(token, dictionary);
+            }
+            return token;
+        })
+        .filter((token) => !token.attributes.palette);
+
+    return dictionary.allTokens;
+};
+
 module.exports = {
     unwrapObjectTransformer,
-    getMapFromObj
+    getMapFromObj,
+    resolvePaletteRef,
+    applyCustomTransformations
 };

packages/tokens-builder/formats/variables.js

@@ -1,5 +1,5 @@
 const { formatHelpers } = require('style-dictionary');
-const { unwrapObjectTransformer } = require('../formats/utils');
+const { applyCustomTransformations } = require('../formats/utils');
 
 module.exports = (StyleDictionary) => {
     StyleDictionary.registerFormat({
@@ -8,13 +8,7 @@ module.exports = (StyleDictionary) => {
             const selector = options.selector ? options.selector : `:root`;
             const { outputReferences } = options;
 
-            // apply custom transformations for tokens
-            dictionary.allProperties = dictionary.allTokens = dictionary.allTokens.flatMap((token) => {
-                if (typeof token.value === 'object' && token.type === 'font') {
-                    return unwrapObjectTransformer(token);
-                }
-                return token;
-            });
+            applyCustomTransformations(dictionary);
 
             dictionary.allTokens.forEach((token) => {
                 token.name = token.name.replace(/(light|dark)-/, '');

tools/build-each-component.js

@@ -1,36 +1,23 @@
+require('../packages/tokens-builder/build');
 const fs = require('fs/promises');
 const path = require('path');
 const StyleDictionary = require('style-dictionary');
 const { formatHelpers } = require('style-dictionary');
-require('../packages/tokens-builder/build');
+const { applyCustomTransformations } = require('../packages/tokens-builder/formats/utils');
 
 const TOKEN_FILE_EXT = 'json5';
 const BASE_PATH = 'packages/design-tokens/web';
 
-// Original console.log function
-const originalLog = console.log;
-
-console.log = (message) => {
-    /*
-    Light/dark token names are in the same file but under different selectors
-    But Style-Dictionary expects 1 unique token per file, or it will throw warn
-    So, console output is overwritten to prevent unnecessary errors message
-    */
-    if (!message.includes('token collisions')) {
-        originalLog(message);
-    }
-};
-
 const sdConfig = {
     source: [`${BASE_PATH}/properties/**/*.json5`, `${BASE_PATH}/components/**/*.json5`],
     platforms: {
         css: {
             buildPath: `dist/design-tokens/web/components/styles/`,
             transformGroup: 'kbq/css',
-            filter: (token) =>
-                !['light', 'dark', 'font', 'size', 'typography', 'md-typography', 'palette'].includes(
-                    token.attributes.category
-                )
+            filter: (token) => !['font', 'size', 'typography', 'md-typography'].includes(token.attributes.category),
+            options: {
+                outputReferences: true
+            }
         }
     }
 };
@@ -45,9 +32,14 @@ StyleDictionary.registerFormat({
     formatter: function ({ dictionary, options = {} }) {
         const { outputReferences, selector = ':root', darkThemeSelector = '.kbq-dark' } = options;
 
+        const allTokens = applyCustomTransformations(dictionary);
+
         dictionary.allTokens.forEach((token) => {
             token.name = token.name.replace(/(light|dark)-/, '');
         });
+        dictionary.allTokens = dictionary.allProperties = allTokens.filter(
+            (token) => !['light', 'dark'].includes(token.attributes.category)
+        );
 
         // formatting function expects dictionary as input, so here initialize a copy to work with different tokens
         const baseDictionary = { ...dictionary };
@@ -82,7 +74,9 @@ const main = async () => {
             destination: `${path.basename(currentValue, `.${TOKEN_FILE_EXT}`)}.css`,
             filter: (token) =>
                 token.attributes.category?.includes(path.basename(currentValue, `.${TOKEN_FILE_EXT}`)) ||
-                path.basename(currentValue, `.${TOKEN_FILE_EXT}`).includes(token.attributes.category),
+                path.basename(currentValue, `.${TOKEN_FILE_EXT}`).includes(token.attributes.category) ||
+                // give access to light/dark/palette tokens to resolve reference manually
+                ['light', 'dark', 'palette'].includes(token.attributes.category),
             format: 'kbq-css/component',
             prefix: 'kbq'
         }));