feat: support composite typography tokens (#39)

Author: NikGurev

packages/tokens-builder/README.md

@@ -9,3 +9,35 @@ Overall, this script orchestrates the generation of design tokens by applying cu
 filters, and formats to the specified theme configuration for multiple platforms,
 facilitating a streamlined design token workflow compatible with
 various output formats like SCSS, CSS, and TypeScript.
+
+## Typography composite tokens
+
+Tokens builder supports usage of [composite tokens](https://design-tokens.github.io/community-group/format/#composite-design-token) for CSS platform.
+For now, typography token sets are supported.
+
+### Example of usage
+
+```json
+{
+    "<component-name>": {
+        "font": {
+            "type": "font",
+            "<token-with-composite-token-reference>": "{typography.<typography-set>}"
+        }
+    }
+}
+```
+
+where `<typography-set>` is a set from `@koobiq/design-tokens/web/properties/typography.json5`
+
+"type": "font" property is **required.**
+
+output:
+
+```
+  --kbq-<component-name>-font-<token-with-composite-token-reference>-font-size: <value>;
+  --kbq-<component-name>-font-<token-with-composite-token-reference>-font-weight: <value>;
+  --kbq-<component-name>-font-<token-with-composite-token-reference>-line-height: <value>;
+  --kbq-<component-name>-font-<token-with-composite-token-reference>-font-family: <value>;
+  // ...etc
+```

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

@@ -7,7 +7,8 @@ module.exports = (StyleDictionary) => {
                 !prop.attributes.palette &&
                 !prop.attributes.light &&
                 !prop.attributes.dark &&
-                !prop.attributes.font
+                !prop.attributes.font &&
+                prop.type !== 'font'
             );
         }
     });
@@ -24,6 +25,6 @@ module.exports = (StyleDictionary) => {
 
     StyleDictionary.registerFilter({
         name: 'css-variables-font',
-        matcher: (prop) => prop.attributes.font
+        matcher: (prop) => prop.attributes.font || prop.type === 'font'
     });
 };

packages/tokens-builder/formats/palette.js

@@ -1,3 +1,5 @@
+const { getMapFromObj } = require('../formats/utils');
+
 module.exports = (StyleDictionary) => {
     StyleDictionary.registerFormat({
         name: 'kbq-scss/palette',
@@ -6,17 +8,3 @@ module.exports = (StyleDictionary) => {
         }
     });
 };
-
-function getMapFromObj(object) {
-    const result = Object.keys(object)
-        .map((key) => {
-            if (key === 'contrast') {
-                return `${key}: ${getMapFromObj(object[key])}`;
-            }
-
-            return `${key}: ${object[key].value},\n`;
-        })
-        .join('');
-
-    return `(\n${result}\n)`;
-}

packages/tokens-builder/formats/utils.js

@@ -0,0 +1,35 @@
+const transform = require('style-dictionary/lib/common/transforms');
+
+const unwrapObjectTransformer = (token) => {
+    return Object.keys(token.value).map((key) => {
+        const subToken = token.value[key];
+        const res = {
+            ...subToken,
+            filePath: token.filePath,
+            path: [...token.path, key],
+            name: `kbq-${[...token.path, key].join('-')}`,
+            original: { value: subToken }
+        };
+        res.attributes = { ...transform['attribute/cti'].transformer(res), font: true };
+        return res;
+    }, {});
+};
+
+const getMapFromObj = (object) => {
+    const result = Object.keys(object)
+        .map((key) => {
+            if (key === 'contrast') {
+                return `${key}: ${getMapFromObj(object[key])}`;
+            }
+
+            return `${key}: ${object[key].value},\n`;
+        })
+        .join('');
+
+    return `(\n${result}\n)`;
+};
+
+module.exports = {
+    unwrapObjectTransformer,
+    getMapFromObj
+};

packages/tokens-builder/formats/variables.js

@@ -1,4 +1,5 @@
 const { formatHelpers } = require('style-dictionary');
+const { unwrapObjectTransformer } = require('../formats/utils');
 
 module.exports = (StyleDictionary) => {
     StyleDictionary.registerFormat({
@@ -7,6 +8,14 @@ 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;
+            });
+
             dictionary.allTokens.forEach((token) => {
                 token.name = token.name.replace(/(light|dark)-/, '');
             });