@ptsecurity/mosaic 13.6.1 → 13.7.2

package/design-tokens/ptsecurity-mosaic-design-tokens.d.ts

@@ -1,5 +1,5 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ptsecurity/mosaic/design-tokens" />
-export * from './index';
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ptsecurity/mosaic/design-tokens" />
+export * from './index';

package/design-tokens/public-api.d.ts

@@ -1,3 +1,3 @@
-import * as legacyTokens from './legacy-2017/tokens';
-export { legacyTokens };
-export * from './pt-2022/tokens';
+import * as legacyTokens from './legacy-2017/tokens';
+export { legacyTokens };
+export * from './pt-2022/tokens';

package/design-tokens/style-dictionary/build.js

@@ -1,63 +1,76 @@
-const StyleDictionary = require('style-dictionary');
-const getPlatformConfig = require('./configs');
-
-// ==== Include custom transforms ====
-require('./transforms/attribute/typography')(StyleDictionary);
-require('./transforms/attribute/palette')(StyleDictionary);
-require('./transforms/attribute/prefix')(StyleDictionary);
-require('./transforms/attribute/size')(StyleDictionary);
-
-// ==== Include custom filters ====
-require('./filters/palette')(StyleDictionary);
-require('./filters/color')(StyleDictionary);
-require('./filters/size')(StyleDictionary);
-require('./filters/typography')(StyleDictionary);
-
-// ==== Include custom transform groups ====
-require('./transformGroups/scss')(StyleDictionary);
-require('./transformGroups/css')(StyleDictionary);
-require('./transformGroups/ts')(StyleDictionary);
-
-// ==== Include custom formats ====
-require('./formats/typography')(StyleDictionary);
-require('./formats/palette')(StyleDictionary);
-
-// ==== Run build ====
-console.log('Build started...');
-console.log('==============================================');
-
-module.exports = (themeConfig) => {
-    StyleDictionary.registerFileHeader({
-        name: 'customHeader',
-        fileHeader: () => {
-            return [`Do not edit directly`];
-        }
-    });
-    console.log('themeConfig: ', themeConfig);
-
-    if (!themeConfig || themeConfig.length === 0) {
-        console.error('Build Failed. Please set ThemeConfig, for example: ', {
-                name: 'default-theme',
-                buildPath: [
-                    `packages/mosaic/design-tokens/tokens/properties/**/*.json5`,
-                    `packages/mosaic/design-tokens/tokens/components/**/*.json5`
-                ],
-                outputPath: 'packages/mosaic/design-tokens/'
-            }
-        )
-        process.exit(0);
-    }
-
-    themeConfig.map((platform) => {
-        // APPLY THE CONFIGURATION
-        // Very important: the registration of custom transforms
-        // needs to be done _before_ applying the configuration
-        const StyleDictionaryExtended = StyleDictionary.extend(getPlatformConfig(platform));
-
-        // FINALLY, BUILD ALL THE PLATFORMS
-        StyleDictionaryExtended.buildAllPlatforms();
-    });
-
-    console.log('\n==============================================');
-    console.log('\nBuild completed!');
-}
+const StyleDictionary = require('style-dictionary');
+const getPlatformConfig = require('./configs');
+
+// ==== Include custom transforms ====
+require('./transforms/attribute/typography')(StyleDictionary);
+require('./transforms/attribute/palette')(StyleDictionary);
+require('./transforms/attribute/prefix')(StyleDictionary);
+require('./transforms/attribute/size')(StyleDictionary);
+require('./transforms/attribute/figma-border')(StyleDictionary);
+require('./transforms/attribute/figma-font')(StyleDictionary);
+require('./transforms/attribute/figma-typography')(StyleDictionary);
+require('./transforms/attribute/figma-opacity')(StyleDictionary);
+require('./transforms/attribute/figma-spacing')(StyleDictionary);
+require('./transforms/attribute/figma-sizing')(StyleDictionary);
+require('./transforms/attribute/figma-color')(StyleDictionary);
+require('./transforms/attribute/figma-shadow')(StyleDictionary);
+require('./transforms/attribute/figma-default')(StyleDictionary);
+require('./transforms/attribute/figma-group')(StyleDictionary);
+require('./transforms/value/figma-values')(StyleDictionary);
+
+// ==== Include custom filters ====
+require('./filters/palette')(StyleDictionary);
+require('./filters/color')(StyleDictionary);
+require('./filters/size')(StyleDictionary);
+require('./filters/typography')(StyleDictionary);
+
+// ==== Include custom transform groups ====
+require('./transformGroups/scss')(StyleDictionary);
+require('./transformGroups/css')(StyleDictionary);
+require('./transformGroups/ts')(StyleDictionary);
+require('./transformGroups/figma')(StyleDictionary);
+
+// ==== Include custom formats ====
+require('./formats/typography')(StyleDictionary);
+require('./formats/palette')(StyleDictionary);
+require('./formats/figma')(StyleDictionary);
+
+// ==== Run build ====
+console.log('Build started...');
+console.log('==============================================');
+
+module.exports = (themeConfig) => {
+    StyleDictionary.registerFileHeader({
+        name: 'customHeader',
+        fileHeader: () => {
+            return [`Do not edit directly`];
+        }
+    });
+    console.log('themeConfig: ', themeConfig);
+
+    if (!themeConfig || themeConfig.length === 0) {
+        console.error('Build Failed. Please set ThemeConfig, for example: ', {
+                name: 'default-theme',
+                buildPath: [
+                    `packages/mosaic/design-tokens/tokens/properties/**/*.json5`,
+                    `packages/mosaic/design-tokens/tokens/components/**/*.json5`
+                ],
+                outputPath: 'packages/mosaic/design-tokens/'
+            }
+        )
+        process.exit(0);
+    }
+
+    themeConfig.map((platform) => {
+        // APPLY THE CONFIGURATION
+        // Very important: the registration of custom transforms
+        // needs to be done _before_ applying the configuration
+        const StyleDictionaryExtended = StyleDictionary.extend(getPlatformConfig(platform));
+
+        // FINALLY, BUILD ALL THE PLATFORMS
+        StyleDictionaryExtended.buildAllPlatforms();
+    });
+
+    console.log('\n==============================================');
+    console.log('\nBuild completed!');
+}

package/design-tokens/style-dictionary/configs/css.js

@@ -1,13 +1,13 @@
-module.exports = {
-    css: {
-        transformGroup: 'mc/css',
-        files: [
-            {
-                destination: 'css-tokens.css',
-                format: 'css/variables',
-                filter: 'size',
-                prefix: 'mc'
-            }
-        ]
-    }
-};
+module.exports = {
+    css: {
+        transformGroup: 'mc/css',
+        files: [
+            {
+                destination: 'css-tokens.css',
+                format: 'css/variables',
+                filter: 'size',
+                prefix: 'mc'
+            }
+        ]
+    }
+};

package/design-tokens/style-dictionary/configs/figma.js

@@ -0,0 +1,11 @@
+module.exports = {
+    figma: {
+        transformGroup: 'mc/figma',
+        files: [
+            {
+                destination: 'figma-tokens.json',
+                format: 'figmaTokensPlugin',
+            },
+        ],
+    },
+};

package/design-tokens/style-dictionary/configs/index.js

@@ -1,48 +1,48 @@
-const merge = require('lodash/merge');
-
-const scssConfig = require('./scss');
-const jsConfig = require('./js');
-const cssConfig = require('./css');
-
-const filterObj = {
-    options: {
-        showFileHeader: true,
-        fileHeader: 'customHeader'
-    }
-};
-
-function filterOptions(platforms) {
-    const platformObj = {};
-
-    platforms.map(p => Object.assign(platformObj, p));
-
-    Object.keys(platformObj).forEach((p) => {
-        platformObj[p].files.map(f => merge(f, filterObj));
-    });
-
-    return platformObj;
-}
-
-function getSources(theme) {
-
-    return theme.buildPath;
-}
-
-function getConfigs(theme) {
-
-    scssConfig.scss.buildPath = theme.outputPath;
-    jsConfig.js.buildPath = theme.outputPath;
-    cssConfig.css.buildPath = theme.outputPath;
-
-    return filterOptions([scssConfig, jsConfig, cssConfig]);
-}
-
-module.exports = (theme) => {
-
-    return {
-        source: [
-            ...getSources(theme)
-        ],
-        platforms: getConfigs(theme)
-    };
-};
+const merge = require('lodash/merge');
+const scssConfig = require('./scss');
+const jsConfig = require('./js');
+const cssConfig = require('./css');
+const figmaConfig = require('./figma');
+
+const filterObj = {
+    options: {
+        showFileHeader: true,
+        fileHeader: 'customHeader'
+    }
+};
+
+function filterOptions(platforms) {
+    const platformObj = {};
+
+    platforms.map(p => Object.assign(platformObj, p));
+
+    Object.keys(platformObj).forEach((p) => {
+        platformObj[p].files.map(f => merge(f, filterObj));
+    });
+
+    return platformObj;
+}
+
+function getSources(theme) {
+
+    return theme.buildPath;
+}
+
+function getConfigs(theme) {
+    scssConfig.scss.buildPath = theme.outputPath;
+    jsConfig.js.buildPath = theme.outputPath;
+    cssConfig.css.buildPath = theme.outputPath;
+    figmaConfig.figma.buildPath = theme.outputPath;
+
+    return filterOptions([scssConfig, jsConfig, cssConfig, figmaConfig]);
+}
+
+module.exports = (theme) => {
+
+    return {
+        source: [
+            ...getSources(theme)
+        ],
+        platforms: getConfigs(theme)
+    };
+};

package/design-tokens/style-dictionary/configs/js.js

@@ -1,9 +1,9 @@
-module.exports = {
-    js: {
-        transformGroup: 'mc/ts',
-        files: [{
-            destination: 'tokens.ts',
-            format: 'javascript/es6'
-        }]
-    }
-};
+module.exports = {
+    js: {
+        transformGroup: 'mc/ts',
+        files: [{
+            destination: 'tokens.ts',
+            format: 'javascript/es6'
+        }]
+    }
+};

package/design-tokens/style-dictionary/configs/scss.js

@@ -1,23 +1,23 @@
-module.exports = {
-    scss: {
-        transformGroup: 'mc/scss',
-        files: [
-            {
-                destination: '_variables.scss',
-                format: 'scss/variables',
-                filter: 'color'
-            },
-            {
-                destination: '_palette.scss',
-                format: 'mc-scss/palette',
-                filter: 'palette'
-            },
-            {
-                destination: '_typography.scss',
-                format: 'mc-scss/typography',
-                mapName: 'mosaic',
-                filter: 'typography'
-            }
-        ]
-    }
-};
+module.exports = {
+    scss: {
+        transformGroup: 'mc/scss',
+        files: [
+            {
+                destination: '_variables.scss',
+                format: 'scss/variables',
+                filter: 'color'
+            },
+            {
+                destination: '_palette.scss',
+                format: 'mc-scss/palette',
+                filter: 'palette'
+            },
+            {
+                destination: '_typography.scss',
+                format: 'mc-scss/typography',
+                mapName: 'mosaic',
+                filter: 'typography'
+            }
+        ]
+    }
+};

package/design-tokens/style-dictionary/figma-types.js

@@ -0,0 +1,41 @@
+const typographySingleTypes = {
+    textTransform: 'textTransform',
+    textCase: 'textCase',
+    fontFeatureSettings: 'fontFeatureSettings',
+    lineHeight: 'lineHeight',
+    letterSpacing: 'letterSpacing',
+    fontFamily: 'fontFamily',
+    fontSize: 'fontSize',
+    fontWeight: 'fontWeight'
+};
+
+const typographyPluralTypes = {
+    fontFamilies: 'fontFamilies',
+    fontWeights: 'fontWeights',
+    lineHeights: 'lineHeights',
+    fontSizes: 'fontSizes'
+};
+
+const typographyTypes = {
+    ...typographySingleTypes,
+    ...typographyPluralTypes
+};
+
+const figmaTypes = {
+    ...typographyTypes,
+    typography: 'typography',
+    other: 'other',
+    color: 'color',
+    borderWidth: 'borderWidth',
+    borderRadius: 'borderRadius',
+    sizing: 'sizing',
+    spacing: 'spacing',
+    opacity: 'opacity',
+    boxShadow: 'boxShadow'
+};
+
+module.exports = {
+    figmaTypes,
+    typographySingleTypes,
+    typographyPluralTypes
+};

package/design-tokens/style-dictionary/filters/color.js

@@ -1,7 +1,7 @@
-module.exports = (StyleDictionary) => {
-
-    StyleDictionary.registerFilter({
-        name: 'color',
-        matcher: (prop) => !prop.attributes.palette && !prop.attributes.typography
-    })
-}
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerFilter({
+        name: 'color',
+        matcher: (prop) => !prop.attributes.palette && !prop.attributes.typography
+    })
+}

package/design-tokens/style-dictionary/filters/palette.js

@@ -1,7 +1,7 @@
-module.exports = (StyleDictionary) => {
-
-    StyleDictionary.registerFilter({
-        name: 'palette',
-        matcher: (prop) => prop.attributes.palette
-    })
-}
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerFilter({
+        name: 'palette',
+        matcher: (prop) => prop.attributes.palette
+    })
+}

package/design-tokens/style-dictionary/filters/size.js

@@ -1,7 +1,7 @@
-module.exports = (StyleDictionary) => {
-
-    StyleDictionary.registerFilter({
-        name: 'size',
-        matcher: (prop) => prop.attributes.size
-    })
-}
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerFilter({
+        name: 'size',
+        matcher: (prop) => prop.attributes.size
+    })
+}

package/design-tokens/style-dictionary/filters/typography.js

@@ -1,7 +1,7 @@
-module.exports = (StyleDictionary) => {
-
-    StyleDictionary.registerFilter({
-        name: 'typography',
-        matcher: (prop) => prop.attributes.typography
-    })
-}
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerFilter({
+        name: 'typography',
+        matcher: (prop) => prop.attributes.typography
+    })
+}

package/design-tokens/style-dictionary/formats/figma.js

@@ -0,0 +1,104 @@
+const { typographySingleTypes, figmaTypes } = require('../figma-types');
+const setProperty = require('lodash/set');
+
+const JSON_INDENTATION = 2;
+
+function buildTypography(tokens) {
+    return {
+        value: Object.entries(tokens).reduce(
+            (accum, [, item]) => {
+                const { value, attributes: { figmaPropType }} = item;
+                accum[figmaPropType] = cleanValue(value);
+
+                return accum;
+            },
+            {}
+        ),
+        type: figmaTypes.typography
+    };
+}
+
+function rebuildTokes(tokens, parentCategory = null) {
+    if (tokens.value === undefined) {
+        const firstItemType = Object.values(tokens)[0] ?.attributes?.figmaPropType;
+        if (Object.values(typographySingleTypes).includes(firstItemType)) {
+            return buildTypography(tokens);
+        }
+
+        return Object.entries(tokens).reduce(
+            (accum, [tokenKey, tokenValue]) => {
+                accum[tokenKey] = cleanValue(rebuildTokes(tokenValue, parentCategory));
+
+                return accum;
+            },
+            {}
+        );
+    }
+
+    if (typeof tokens.value === 'object') {
+        return rebuildTokes(tokens.value, tokens.attributes.category);
+    }
+
+    let { category, figmaPropType, figmaValue, figmaLink } = tokens.attributes;
+    const { original } = tokens;
+    figmaValue = figmaLink ? `{${figmaValue}}` : figmaValue;
+    let value = figmaValue ?? original.value;
+
+    if (parentCategory && category !== parentCategory) {
+        value = buildRefFromAttributes(tokens.attributes);
+    }
+
+    return { value: cleanValue(value), type: figmaPropType };
+}
+
+function cleanValue(value) {
+    return typeof value === 'string' ? value.replaceAll('.value.', '.') : value;
+}
+
+function buildRefFromAttributes(attributes) {
+    const { category, type, item, subitem } = attributes;
+    const ref = [category, type, item, subitem].filter((refPart) => !!refPart);
+
+    return `{${ref.join('.')}}`;
+}
+
+function findLastLeafAttributes(property) {
+    if (!property.attributes) {
+        return findLastLeafAttributes(property[Object.keys(property)[0]]);
+    }
+
+    return property.attributes;
+}
+
+function prepareFigmaTitle(value) {
+    return value
+        .replaceAll('-', ' ')
+        .split(' ')
+        .map((titlePart) => titlePart.charAt(0).toUpperCase() + titlePart.slice(1))
+        .join(' ');
+}
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerFormat({
+        name: 'figmaTokensPlugin',
+        formatter: ({ dictionary }) => {
+            const groupedDict = Object.entries(dictionary.tokens)
+                .filter(([, propValue]) => typeof propValue === 'object')
+                .reduce(
+                    (accum, [propName, propValue]) => {
+                        const { group, subgroup } = findLastLeafAttributes(propValue);
+                        const propPath = group === 'properties'
+                            ? `${prepareFigmaTitle(group)}.${propName}`
+                            : `${prepareFigmaTitle(subgroup)}.${propName}`;
+                        setProperty(accum, propPath, propValue);
+
+                        return accum;
+                    },
+                    {}
+                );
+            const figmaTokens = rebuildTokes(groupedDict);
+
+            return JSON.stringify(figmaTokens, null, JSON_INDENTATION);
+        }
+    });
+};

package/design-tokens/style-dictionary/formats/palette.js

@@ -1,25 +1,25 @@
-
-module.exports = (StyleDictionary) => {
-    StyleDictionary.registerFormat({
-        name: 'mc-scss/palette',
-        formatter: function (dictionary) {
-            return dictionary.allProperties
-                .map((prop) => `\$${prop.name}: ${getMapFromObj(prop.value)};\n`)
-                .join('\n');
-        }
-    })
-};
-
-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)`
-}
+
+module.exports = (StyleDictionary) => {
+    StyleDictionary.registerFormat({
+        name: 'mc-scss/palette',
+        formatter: function (dictionary) {
+            return dictionary.allProperties
+                .map((prop) => `\$${prop.name}: ${getMapFromObj(prop.value)};\n`)
+                .join('\n');
+        }
+    })
+};
+
+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)`
+}