@ptsecurity/mosaic 13.6.2 → 13.8.4

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
+    });
+};

package/esm2020/button/button.component.mjs

@@ -122,7 +122,7 @@ export class McButton extends McButtonMixinBase {
     }
 }
 /** @nocollapse */ /** @nocollapse */ McButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McButton, deps: [{ token: i0.ElementRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McButton, selector: "[mc-button]", inputs: { color: "color", tabIndex: "tabIndex", disabled: "disabled" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur()" }, properties: { "attr.disabled": "disabled || null", "attr.tabIndex": "tabIndex" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;height:var(--mc-button-size-height, 32px);border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:var(--mc-button-size-border-radius, 4px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-icon-button .mc-button-wrapper,.mc-light-button .mc-button-wrapper,.mc-button .mc-button-wrapper{display:flex;align-items:center}.mc-icon-button .mc-icon_left,.mc-light-button .mc-icon_left,.mc-button .mc-icon_left{margin-right:var(--mc-icon-button-size-left-icon-padding, 6px)}.mc-button{padding-left:var(--mc-button-size-horizontal-padding, 12px);padding-right:var(--mc-button-size-horizontal-padding, 12px)}.mc-icon-button{padding-left:var(--mc-icon-button-size-horizontal-padding, 8px);padding-right:var(--mc-icon-button-size-horizontal-padding, 8px)}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ /** @nocollapse */ McButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McButton, selector: "[mc-button]", inputs: { color: "color", tabIndex: "tabIndex", disabled: "disabled" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur()" }, properties: { "attr.disabled": "disabled || null", "attr.tabIndex": "tabIndex" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;height:var(--mc-button-size-height, 32px);border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:var(--mc-button-size-border-radius, 4px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-icon-button .mc-button-wrapper,.mc-light-button .mc-button-wrapper,.mc-button .mc-button-wrapper{display:flex;align-items:center}.mc-icon-button .mc-icon_left,.mc-light-button .mc-icon_left,.mc-button .mc-icon_left{margin-right:var(--mc-icon-button-size-left-icon-padding, 6px)}.mc-button{padding-left:var(--mc-button-size-horizontal-padding, 12px);padding-right:var(--mc-button-size-horizontal-padding, 12px)}.mc-icon-button{padding-left:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px));padding-right:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px))}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McButton, decorators: [{
             type: Component,
             args: [{ selector: '[mc-button]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: ['color', 'tabIndex'], host: {
@@ -130,7 +130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '[attr.tabIndex]': 'tabIndex',
                         '(focus)': 'onFocus($event)',
                         '(blur)': 'onBlur()'
-                    }, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;height:var(--mc-button-size-height, 32px);border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:var(--mc-button-size-border-radius, 4px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-icon-button .mc-button-wrapper,.mc-light-button .mc-button-wrapper,.mc-button .mc-button-wrapper{display:flex;align-items:center}.mc-icon-button .mc-icon_left,.mc-light-button .mc-icon_left,.mc-button .mc-icon_left{margin-right:var(--mc-icon-button-size-left-icon-padding, 6px)}.mc-button{padding-left:var(--mc-button-size-horizontal-padding, 12px);padding-right:var(--mc-button-size-horizontal-padding, 12px)}.mc-icon-button{padding-left:var(--mc-icon-button-size-horizontal-padding, 8px);padding-right:var(--mc-icon-button-size-horizontal-padding, 8px)}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:inherit}\n"] }]
+                    }, template: "<div class=\"mc-button-wrapper\">\n    <ng-content></ng-content>\n</div>\n<div class=\"mc-button-overlay\" (click)=\"haltDisabledEvents($event)\"></div>\n", styles: [".mc-icon-button,.mc-light-button,.mc-button{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;margin:0;white-space:nowrap;text-decoration:none;text-align:center;vertical-align:baseline;height:var(--mc-button-size-height, 32px);border:var(--mc-button-size-border-width, 1px) solid transparent;border-radius:var(--mc-button-size-border-radius, 4px)}.mc-icon-button::-moz-focus-inner,.mc-light-button::-moz-focus-inner,.mc-button::-moz-focus-inner{border:0}.mc-icon-button:focus,.mc-light-button:focus,.mc-button:focus{outline:none}[disabled].mc-icon-button,[disabled].mc-light-button,[disabled].mc-button{cursor:default}.cdk-focused.mc-icon-button,.cdk-focused.mc-light-button,.cdk-focused.mc-button{z-index:1}.mc-icon-button .mc-button-wrapper,.mc-light-button .mc-button-wrapper,.mc-button .mc-button-wrapper{display:flex;align-items:center}.mc-icon-button .mc-icon_left,.mc-light-button .mc-icon_left,.mc-button .mc-icon_left{margin-right:var(--mc-icon-button-size-left-icon-padding, 6px)}.mc-button{padding-left:var(--mc-button-size-horizontal-padding, 12px);padding-right:var(--mc-button-size-horizontal-padding, 12px)}.mc-icon-button{padding-left:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px));padding-right:calc(var(--mc-icon-button-size-horizontal-padding, 8px) - var(--mc-button-size-border-width, 1px))}.mc-button-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:inherit}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.FocusMonitor }]; }, propDecorators: { disabled: [{
                 type: Input
             }] } });