feat: added vars references (#DS-2679) WIP

packages/design-tokens/web/components/markdown.json5

@@ -179,7 +179,7 @@
                 'max-width': { value: '{markdown.size.max-width}'},
                 'margin-top': { value: '{size.m}' },
                 'margin-bottom': { value: '{size.m}' },
-                'margin-top-after-paragraph': { value: '-{size.s}' },
+                'margin-top-after-paragraph': { value: 'calc(-1 * {size.s})' },
                 'ol-number-padding-right': { value: '{size.xxs}' },
                 'ul-padding': { value: '0 0 0 {size.xxl}' },
                 'item-margin-bottom': { value: '{size.xxs}' }
@@ -332,7 +332,7 @@
                 'margin-top': { value: '{size.m}' },
                 'margin-bottom': { value: '{size.m}' },
 
-                'caption-margin-top': { value: '-{size.s}' },
+                'caption-margin-top': { value: 'calc(-1 * {size.s})' },
                 'caption-margin-bottom': { value: '{size.xxl}' },
             },
             font: {

packages/tokens-builder/configs/css.js

@@ -6,7 +6,10 @@ module.exports = {
                 destination: 'css-tokens.css',
                 format: 'css/variables',
                 filter: 'css-variables',
-                prefix: 'kbq'
+                prefix: 'kbq',
+                options: {
+                    outputReferences: true
+                }
             },
             {
                 destination: 'css-tokens-light.css',
@@ -32,7 +35,9 @@ module.exports = {
                 filter: 'css-variables-font',
                 prefix: 'kbq',
                 options: {
-                    selector: '.kbq-font'
+                    selector: '.kbq-font',
+                    // warnings expected, since global fonts are defined in css-tokens.css
+                    outputReferences: true
                 }
             }
         ]

packages/tokens-builder/formats/utils.js

@@ -29,7 +29,19 @@ 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);
+        }
+        return token;
+    });
+
+    return dictionary.allTokens;
+};
+
 module.exports = {
     unwrapObjectTransformer,
-    getMapFromObj
+    getMapFromObj,
+    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)-/, '');