@ptsecurity/mosaic 14.7.1 → 15.0.0

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

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

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

@@ -1,78 +0,0 @@
-const StyleDictionary = require('style-dictionary');
-const getPlatformConfig = require('./configs');
-
-// ==== Include custom transforms ====
-require('./transforms/attribute/md-typography')(StyleDictionary);
-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);
-require('./filters/md-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 +0,0 @@
-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

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

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

@@ -1,46 +0,0 @@
-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 +0,0 @@
-module.exports = {
-    js: {
-        transformGroup: 'mc/ts',
-        files: [{
-            destination: 'tokens.ts',
-            format: 'javascript/es6'
-        }]
-    }
-};

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

@@ -1,29 +0,0 @@
-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'
-            },
-            {
-                destination: '_md-typography.scss',
-                format: 'mc-scss/typography',
-                mapName: 'md-typography',
-                filter: 'md-typography'
-            }
-        ]
-    }
-};

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

@@ -1,41 +0,0 @@
-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,9 +0,0 @@
-module.exports = (StyleDictionary) => {
-
-    StyleDictionary.registerFilter({
-        name: 'color',
-        matcher: (prop) => !prop.attributes.palette && 
-            !prop.attributes.typography && 
-            !prop.attributes['md-typography']
-    })
-}

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

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

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

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

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

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

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

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

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

@@ -1,104 +0,0 @@
-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.replace(/\.value\./g, '.') : 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
-        .replace(/-/g, ' ')
-        .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 +0,0 @@
-
-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)`
-}

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

@@ -1,52 +0,0 @@
-module.exports = (StyleDictionary) => {
-
-    StyleDictionary.registerFormat({
-        name: 'mc-scss/typography',
-        formatter: function(dictionary) {
-            let string;
-
-            string = dictionary.allProperties
-                .map((prop) => {
-                    let output = '';
-
-                    const value = prop.attributes.category === 'asset' ? `"${ prop.value }"` : prop.value;
-
-                    output += `$${ prop.name }: ${ value };`
-
-                    if (prop.comment) {
-                        output += ` // ${ prop.comment }`;
-                    }
-
-                    output += '\n';
-
-                    return output;
-                })
-                .join('');
-
-            string += `\n$${this.mapName || 'tokens' }: ${processJsonNode(dictionary.properties, 0)};\n`;
-
-            return string;
-        }
-    })
-};
-
-
-function processJsonNode(obj, depth) {
-    let output = '';
-
-    if (obj.hasOwnProperty('value')) {
-        output += `$${obj.name}`;
-    } else {
-        output += '(\n'
-        output += Object.keys(obj).map((newKey) => {
-            const newProp = obj[newKey];
-            const indent = '  '.repeat(depth+1);
-
-            return `${indent}'${newKey}': ${processJsonNode(newProp, depth + 1)}`;
-        }).join(',\n');
-
-        output += '\n' + '  '.repeat(depth) + ')';
-    }
-
-    return output;
-}

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

@@ -1,13 +0,0 @@
-module.exports = (StyleDictionary) => {
-
-    StyleDictionary.registerTransformGroup({
-        name: 'mc/css',
-        transforms: [
-            'attribute/cti',
-            'mc-attribute/size',
-            'name/cti/kebab',
-            'color/css',
-            'mc/prefix'
-        ]
-    });
-};

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

@@ -1,21 +0,0 @@
-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/transformGroups/scss.js

@@ -1,13 +0,0 @@
-module.exports = (StyleDictionary) => {
-
-    StyleDictionary.registerTransformGroup({
-        name: 'mc/scss',
-        transforms: [
-            'attribute/cti',
-            'mc-attribute/palette',
-            'mc-attribute/typography',
-            'mc-attribute/md-typography',
-            'name/cti/kebab'
-        ]
-    });
-}

package/design-tokens/style-dictionary/transformGroups/ts.js

@@ -1,11 +0,0 @@
-module.exports = (StyleDictionary) => {
-    StyleDictionary.registerTransformGroup({
-        name: 'mc/ts',
-        transforms: [
-            'attribute/cti',
-            'name/cti/pascal',
-            'size/px',
-            'color/hex'
-        ]
-    });
-}

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

@@ -1,18 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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 })
-    });
-};