@ptsecurity/mosaic 13.2.0 → 13.3.0

package/design-tokens/pt-2022/tokens/properties/typography.json5

@@ -1,140 +0,0 @@
-{
-    "typography": {
-        "display-1": {
-            "font-size": { value: '56px' },
-            "line-height": { value: '76px' },
-            "letter-spacing": { value: 'normal' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.accent.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "display-2": {
-            "font-size": { value: '45px' },
-            "line-height": { value: '56px' },
-            "letter-spacing": { value: 'normal' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.accent.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "display-3": {
-            "font-size": { value: '34px' },
-            "line-height": { value: '44px' },
-            "letter-spacing": { value: 'normal' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.accent.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "headline": {
-            "font-size": { value: '24px' },
-            "line-height": { value: '32px' },
-            "letter-spacing": { value: 'normal' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.accent.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "title": {
-            "font-size": { value: '20px' },
-            "line-height": { value: '28px' },
-            "letter-spacing": { value: 'normal' },
-            "font-weight": { value: '600' },
-            "font-family": { value: '{font.family.accent.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "subheading": {
-            "font-size": { value: '15px' },
-            "line-height": { value: '20px' },
-            "letter-spacing": { value: '-0.009em' },
-            "font-weight": { value: '600' },
-            "font-family": { value: '{font.family.base.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "body": {
-            "font-size": { value: '15px' },
-            "line-height": { value: '20px' },
-            "letter-spacing": { value: '-0.009em' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.base.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "body-strong": {
-            "font-size": { value: '15px' },
-            "line-height": { value: '20px' },
-            "letter-spacing": { value: '-0.009em' },
-            "font-weight": { value: '500' },
-            "font-family": { value: '{font.family.base.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "body-caps": {
-            "font-size": { value: '15px' },
-            "line-height": { value: '20px' },
-            "letter-spacing": { value: '1.7px' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.base.value}' },
-            "text-transform": { value: 'uppercase' }
-        },
-        "body-mono": {
-            "font-size": { value: '15px' },
-            "line-height": { value: '20px' },
-            "letter-spacing": { value: 'normal' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.monospace.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "caption": {
-            "font-size": { value: '13px' },
-            "line-height": { value: '16px' },
-            "letter-spacing": { value: '-0.0025em' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.base.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "caption-caps": {
-            "font-size": { value: '13px' },
-            "line-height": { value: '16px' },
-            "letter-spacing": { value: '1.5px' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.base.value}' },
-            "text-transform": { value: 'uppercase' }
-        },
-        "caption-mono": {
-            "font-size": { value: '13px' },
-            "line-height": { value: '16px' },
-            "letter-spacing": { value: 'normal' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.monospace.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "small-text": {
-            "font-size": { value: '13px' },
-            "line-height": { value: '16px' },
-            "letter-spacing": { value: '-0.0025em' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.base.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "extra-small-text": {
-            "font-size": { value: '11px' },
-            "line-height": { value: '16px' },
-            "letter-spacing": { value: '0.005em' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.base.value}' },
-            "text-transform": { value: 'null' }
-        },
-        "extra-small-text-caps": {
-            "font-size": { value: '11px' },
-            "line-height": { value: '16px' },
-            "letter-spacing": { value: '1px' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.base.value}' },
-            "text-transform": { value: 'uppercase' }
-        },
-        "extra-small-text-mono": {
-            "font-size": { value: '11px' },
-            "line-height": { value: '16px' },
-            "letter-spacing": { value: '0px' },
-            "font-weight": { value: 'normal' },
-            "font-family": { value: '{font.family.monospace.value}' },
-            "text-transform": { value: 'null' }
-        }
-    }
-}

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

@@ -1,62 +0,0 @@
-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);
-
-// ==== 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!');
-}

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/index.js

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

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

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

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

@@ -1,23 +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'
-            }
-        ]
-    }
-};

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

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

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

package/design-tokens/style-dictionary/transforms/attribute/palette.js

@@ -1,9 +0,0 @@
-module.exports = (StyleDictionary) => {
-
-    StyleDictionary.registerTransform({
-        name: 'mc-attribute/palette',
-        type: 'attribute',
-        matcher: (prop) => prop.name === 'palette',
-        transformer: (prop) => ({ palette: true })
-    });
-};

package/design-tokens/style-dictionary/transforms/attribute/prefix.js

@@ -1,11 +0,0 @@
-module.exports = (StyleDictionary) => {
-    StyleDictionary.registerTransform({
-        name: 'mc/prefix',
-        type: 'attribute',
-        transformer: (prop, options) => {
-            const prefix = options.files[0].prefix ? `${options.files[0].prefix}-` : '';
-
-            prop.name = `${prefix}${prop.name}`;
-        }
-    });
-};

package/design-tokens/style-dictionary/transforms/attribute/size.js

@@ -1,8 +0,0 @@
-module.exports = (StyleDictionary) => {
-    StyleDictionary.registerTransform({
-        name: 'mc-attribute/size',
-        type: 'attribute',
-        matcher: (prop) => prop.attributes.type === 'size',
-        transformer: (prop) => ({size: true})
-    });
-}

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

@@ -1,9 +0,0 @@
-module.exports = (StyleDictionary) => {
-
-    StyleDictionary.registerTransform({
-        name: 'mc-attribute/typography',
-        type: 'attribute',
-        matcher: (prop) => prop.attributes.category === 'typography',
-        transformer: (prop) => ({typography: true})
-    });
-};