@ptsecurity/mosaic 13.6.2 → 13.7.1

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/transformGroups/figma.js

@@ -0,0 +1,21 @@
+module.exports = (StyleDictionary) => {
+
+    StyleDictionary.registerTransformGroup({
+        name: 'mc/figma',
+        transforms: [
+            'attribute/cti',
+            "name/cti/kebab",
+            'mc-attribute/figma-group',
+            'mc-attribute/figma-border',
+            'mc-attribute/figma-typography',
+            'mc-attribute/figma-font',
+            'mc-attribute/figma-opacity',
+            'mc-attribute/figma-spacing',
+            'mc-attribute/figma-sizing',
+            'mc-attribute/figma-shadow',
+            'mc-attribute/figma-color',
+            'mc-attribute/figma-default',
+            'mc-value/figma-values',
+        ]
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/figma-border.js

@@ -0,0 +1,18 @@
+const { figmaTypes } = require('../../../figma-types');
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerTransform({
+        name: 'mc-attribute/figma-border',
+        type: 'attribute',
+        matcher: ({ name, attributes }) => name.includes('border') && !attributes.figmaPropType,
+        transformer: ({ name, attributes }) => {
+            const props = {
+                width: figmaTypes.borderWidth,
+                radius: figmaTypes.borderRadius
+            };
+            const entry = Object.entries(props).find(([key]) => name.includes(key));
+
+            return entry ? { figmaPropType: entry[1] } : attributes;
+        }
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/figma-color.js

@@ -0,0 +1,25 @@
+const { figmaTypes } = require('../../../figma-types');
+
+const COLOR_MAX_PARTS = 4;
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerTransform({
+        name: 'mc-attribute/figma-color',
+        type: 'attribute',
+        matcher: ({name, value, attributes: { category, figmaPropType }}) => {
+            if (figmaPropType) {
+                return false;
+            }
+
+            const stringValue = value.toString();
+            const isColorValue = (
+                stringValue.startsWith('#') ||
+                stringValue.startsWith('rgba') ||
+                name.includes('color')
+            ) && stringValue.split(' ').length <= COLOR_MAX_PARTS;
+
+            return isColorValue || category === 'palette';
+        },
+        transformer: () => ({ figmaPropType: figmaTypes.color })
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/figma-default.js

@@ -0,0 +1,10 @@
+const { figmaTypes } = require('../../../figma-types');
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerTransform({
+        name: 'mc-attribute/figma-default',
+        type: 'attribute',
+        matcher: ({ attributes }) => !attributes.figmaPropType,
+        transformer: () => ({ figmaPropType: figmaTypes.other })
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/figma-font.js

@@ -0,0 +1,31 @@
+const { figmaTypes } = require('../../../figma-types');
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerTransform({
+        name: 'mc-attribute/figma-font',
+        type: 'attribute',
+        matcher: ({ name, attributes }) => name.includes('font') && !attributes.figmaPropType,
+        transformer: ({ name, value }) => {
+            const props = {
+                family: figmaTypes.fontFamilies,
+                size: figmaTypes.fontSizes,
+                weight: figmaTypes.fontWeights,
+                height: figmaTypes.lineHeights,
+                spacing: figmaTypes.letterSpacing,
+                transform: figmaTypes.textCase,
+                settings: figmaTypes.fontFeatureSettings
+            };
+            const [, typeName] = Object.entries(props).find(([key]) => name.includes(key)) ?? [];
+
+            if (!typeName) {
+                return {
+                    figmaPropType: 'typography',
+                    figmaValue: `typography.${value}`,
+                    figmaLink: true
+                };
+            }
+
+            return { figmaPropType: typeName };
+        }
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/figma-group.js

@@ -0,0 +1,17 @@
+const path = require('path');
+
+const GROUP_BACK_STEP_INDEX = 2;
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerTransform({
+        name: 'mc-attribute/figma-group',
+        type: 'attribute',
+        transformer: (prop) => {
+            const filePathParts = prop.filePath.split('/');
+            const group = filePathParts[filePathParts.length - GROUP_BACK_STEP_INDEX];
+            const subgroup = path.parse(prop.filePath).name;
+
+            return { group, subgroup };
+        }
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/figma-opacity.js

@@ -0,0 +1,10 @@
+const { figmaTypes } = require('../../../figma-types');
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerTransform({
+        name: 'mc-attribute/figma-opacity',
+        type: 'attribute',
+        matcher: ({ name, attributes }) => name.includes('opacity') && !attributes.figmaPropType,
+        transformer: () => ({ figmaPropType: figmaTypes.opacity })
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/figma-shadow.js

@@ -0,0 +1,66 @@
+const { figmaTypes } = require('../../../figma-types');
+
+const BLUR_SHADOW_INDEX = 2;
+const SPREAD_SHADOW_INDEX = 3;
+const X_SHADOW_INDEX = 0;
+const Y_SHADOW_INDEX = 1;
+const SHADOW_MIN_PARTS = 4;
+
+function transformShadow(value) {
+    const isInnerShadow = value.includes('inset');
+    const valueParts = value.split(' ');
+
+    if (isInnerShadow) {
+        valueParts.shift();
+    }
+
+    return {
+        color: valueParts.pop(),
+        type: isInnerShadow ? 'innerShadow' : 'dropShadow',
+        x: valueParts[X_SHADOW_INDEX] ?? 0,
+        y: valueParts[Y_SHADOW_INDEX] ?? 0,
+        blur: valueParts[BLUR_SHADOW_INDEX] ?? 0,
+        spread: valueParts[SPREAD_SHADOW_INDEX] ?? 0
+    };
+}
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerTransform({
+        name: 'mc-attribute/figma-shadow',
+        type: 'attribute',
+        matcher: ({name, value, attributes }) => (
+            name.includes('shadow') &&
+            value.split(' ').length > SHADOW_MIN_PARTS &&
+            !attributes.figmaPropType
+        ),
+        transformer: ({ value }) => {
+            const rgbaGroups = [];
+            let figmaValue = value;
+
+            const check = figmaValue.match(/(rgba\([\w\d\. \,]+\))/) ?? [];
+
+            for (let i = 1; i < check.length; i++) {
+                figmaValue = figmaValue.replace(check[i], `rgba${i - 1}`);
+                rgbaGroups.push(check[i]);
+            }
+
+            const shadowParts = figmaValue.split(',');
+            figmaValue = shadowParts.length > 1
+                ? shadowParts.map(transformShadow)
+                : transformShadow(figmaValue);
+
+            rgbaGroups.forEach((rgbaValue, rgbaIndex) => {
+                if (Array.isArray(figmaValue)) {
+                    figmaValue.forEach((shadow) => {
+                        shadow.color = shadow.color.replace(`rgba${rgbaIndex}`, rgbaValue);
+                    });
+
+                    return;
+                }
+                figmaValue.color = figmaValue.color.replace(`rgba${rgbaIndex}`, rgbaValue);
+            });
+
+            return { figmaPropType: figmaTypes.boxShadow, figmaValue };
+        }
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/figma-sizing.js

@@ -0,0 +1,16 @@
+const { figmaTypes } = require('../../../figma-types');
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerTransform({
+        name: 'mc-attribute/figma-sizing',
+        type: 'attribute',
+        matcher: ({name, attributes}) => (
+            (
+                name.includes('height') ||
+                name.includes('width') ||
+                name.includes('size')
+            ) && !attributes.figmaPropType
+        ),
+        transformer: () => ({ figmaPropType: figmaTypes.sizing })
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/figma-spacing.js

@@ -0,0 +1,15 @@
+const { figmaTypes } = require('../../../figma-types');
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerTransform({
+        name: 'mc-attribute/figma-spacing',
+        type: 'attribute',
+        matcher: ({name, attributes}) => (
+            (
+                name.includes('padding') ||
+                name.includes('margin')
+            ) && !attributes.figmaPropType
+        ),
+        transformer: (() => ({ figmaPropType: figmaTypes.spacing }))
+    });
+};

package/design-tokens/style-dictionary/transforms/attribute/figma-typography.js

@@ -0,0 +1,24 @@
+const { figmaTypes } = require('../../../figma-types');
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerTransform({
+        name: 'mc-attribute/figma-typography',
+        type: 'attribute',
+        matcher: ({ name, attributes}) => name.includes('typography') && !attributes.figmaPropType,
+        transformer: ({ name, attributes }) => {
+            const props = {
+                spacing: figmaTypes.letterSpacing,
+                transform: figmaTypes.textCase,
+                settings: figmaTypes.fontFeatureSettings,
+                family: figmaTypes.fontFamily,
+                size: figmaTypes.fontSize,
+                weight: figmaTypes.fontWeight,
+                height: figmaTypes.lineHeight
+            };
+
+            const entry = Object.entries(props).find(([key]) => name.includes(key));
+
+            return entry ? { figmaPropType: entry[1] } : attributes;
+        }
+    });
+};

package/design-tokens/style-dictionary/transforms/value/figma-values.js

@@ -0,0 +1,7 @@
+module.exports = (styleDictionary) => {
+    styleDictionary.registerTransform({
+        name: 'mc-value/figma-values',
+        type: 'value',
+        transformer: ({ value }) => value === 'null' ? 'none' : value
+    });
+};