@ptsecurity/mosaic 13.3.0 → 13.3.1

package/design-tokens/legacy-2017/tokens/properties/palette.json5

@@ -0,0 +1,163 @@
+{
+    "palette": {
+        "blue": {
+            "40": { value: '#F5FAFD' },
+            "60": { value: '#EBF4FB' },
+            "100": { value: '#D8EAF7' },
+            "200": { value: '#AAD1EC' },
+            "300": { value: '#7FBAE1' },
+            "400": { value: '#57A4D7' },
+            "500": { value: '#338FCC' },
+            "560": { value: '#277BB3' },
+            "600": { value: '#206EA2' },
+            "700": { value: '#114E77' },
+            "800": { value: '#07314D' },
+            "A100": { value: 'rgba(0, 153, 255, 0.15)' },
+            "A200": { value: 'rgba(0, 153, 255, 0.3)' },
+
+            "contrast": {
+                "40": { value: '#4D4D4D' },
+                "60": { value: '#4D4D4D' },
+                "100": { value: '#4D4D4D' },
+                "200": { value: '#4D4D4D' },
+                "300": { value: '#4D4D4D' },
+                "400": { value: 'white' },
+                "500": { value: 'white' },
+                "560": { value: 'white' },
+                "600": { value: 'white' },
+                "700": { value: 'white' },
+                "800": { value: 'white' },
+                "A100": { value: '#4D4D4D' },
+                "A200": { value: 'white' }
+            }
+        },
+        "green": {
+            "40": { value: '#F6FBF4' },
+            "60": { value: '#EDF8E9' },
+            "100": { value: '#DCF1D4' },
+            "200": { value: '#B4DEA4' },
+            "300": { value: '#8FCC79' },
+            "400": { value: '#6FBA53' },
+            "500": { value: '#52A832' },
+            "560": { value: '#449327' },
+            "600": { value: '#3B8520' },
+            "700": { value: '#276211' },
+            "800": { value: '#163F07' },
+            "A100": { value: 'rgba(68, 255, 0, 0.15)' },
+
+            "contrast": {
+                "40": { value: '#4D4D4D' },
+                "60": { value: '#4D4D4D' },
+                "100": { value: '#4D4D4D' },
+                "200": { value: '#4D4D4D' },
+                "300": { value: '#4D4D4D' },
+                "400": { value: 'white' },
+                "500": { value: 'white' },
+                "560": { value: 'white' },
+                "600": { value: 'white' },
+                "700": { value: 'white' },
+                "800": { value: 'white' },
+                "A100": { value: '#4D4D4D' }
+            }
+        },
+        "red": {
+            "40": { value: '#FEF7F6' },
+            "60": { value: '#FCEFEC' },
+            "100": { value: '#FADEDA' },
+            "200": { value: '#F4B7AE' },
+            "300": { value: '#ED9284' },
+            "400": { value: '#E76E5C' },
+            "500": { value: '#E04D36' },
+            "560": { value: '#C43E29' },
+            "600": { value: '#B23522' },
+            "700": { value: '#832112' },
+            "800": { value: '#541208' },
+            "A100": { value: 'rgba(224, 79, 56, 0.15)' },
+
+            "contrast": {
+                "40": { value: '#4D4D4D' },
+                "60": { value: '#4D4D4D' },
+                "100": { value: '#4D4D4D' },
+                "200": { value: '#4D4D4D' },
+                "300": { value: '#4D4D4D' },
+                "400": { value: 'white' },
+                "500": { value: 'white' },
+                "560": { value: 'white' },
+                "600": { value: 'white' },
+                "700": { value: 'white' },
+                "800": { value: 'white' },
+                "A100": { value: '#4D4D4D' }
+            }
+        },
+        "grey": {
+            "40": { value: '#F5F5F5' },
+            "60": { value: '#F0F0F0' },
+            "100": { value: '#E6E6E6' },
+            "200": { value: '#CCCCCC' },
+            "300": { value: '#B3B3B3' },
+            "400": { value: '#999999' },
+            "500": { value: '#808080' },
+            "560": { value: '#707070' },
+            "600": { value: '#666666' },
+            "700": { value: '#4D4D4D' },
+            "800": { value: '#333333' },
+            "A40": { value: 'rgba(0, 0, 0, 0.04)' },
+            "A60": { value: 'rgba(0, 0, 0, 0.06)' },
+            "A100": { value: 'rgba(0, 0, 0, 0.1)' },
+            "A200": { value: 'rgba(0, 0, 0, 0.2)' },
+            "A300": { value: 'rgba(0, 0, 0, 0.3)' },
+            "A500": { value: 'rgba(0, 0, 0, 0.5)' },
+
+            "contrast": {
+                "40": { value: '#4D4D4D' },
+                "60": { value: '#4D4D4D' },
+                "100": { value: '#4D4D4D' },
+                "200": { value: '#4D4D4D' },
+                "300": { value: '#4D4D4D' },
+                "400": { value: 'white' },
+                "500": { value: 'white' },
+                "560": { value: 'white' },
+                "600": { value: 'white' },
+                "700": { value: 'white' },
+                "800": { value: 'white' }
+            }
+        },
+        "yellow": {
+            "40": { value: '#FDFAF3' },
+            "60": { value: '#FCF5E8' },
+            "100": { value: '#F8EBD1' },
+            "200": { value: '#F0D49B' },
+            "300": { value: '#E7BD68' },
+            "400": { value: '#DFA739' },
+            "500": { value: '#D6930D' },
+            "560": { value: '#BB800A' },
+            "600": { value: '#AA7408' },
+            "700": { value: '#7D5504' },
+            "800": { value: '#503602' },
+            "A100": { value: 'rgba(255, 170, 0, 0.15)' },
+
+            "contrast": {
+                "40": { value: '#4D4D4D' },
+                "60": { value: '#4D4D4D' },
+                "100": { value: '#4D4D4D' },
+                "200": { value: '#4D4D4D' },
+                "300": { value: '#4D4D4D' },
+                "400": { value: 'white' },
+                "500": { value: 'white' },
+                "560": { value: 'white' },
+                "600": { value: 'white' },
+                "700": { value: 'white' },
+                "800": { value: 'white' },
+                "A100": { value: '#4D4D4D' }
+            }
+        }
+    },
+
+    "color": {
+        "blue": { "palette": { value: '{palette.blue}' } },
+        "green": { "palette": { value: '{palette.green}' } },
+        "red": { "palette": { value: '{palette.red}' } },
+        "grey": { "palette": { value: '{palette.grey}' } },
+        "yellow": { "palette": { value: '{palette.yellow}' } }
+    }
+}

package/design-tokens/legacy-2017/tokens/properties/typography.json5

@@ -0,0 +1,175 @@
+{
+    "typography": {
+        "display-1": {
+            "font-size": { value: '56px' },
+            "line-height": { value: '76px' },
+            "letter-spacing": { value: '-0.4px' },
+            "font-weight": { value: 'normal' },
+            "font-family": { value: '{font.family.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { 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.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "display-3": {
+            "font-size": { value: '34px' },
+            "line-height": { value: '44px' },
+            "letter-spacing": { value: '0.25px' },
+            "font-weight": { value: 'normal' },
+            "font-family": { value: '{font.family.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "headline": {
+            "font-size": { value: '24px' },
+            "line-height": { value: '32px' },
+            "letter-spacing": { value: 'normal' },
+            "font-weight": { value: 'normal' },
+            "font-family": { value: '{font.family.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "title": {
+            "font-size": { value: '20px' },
+            "line-height": { value: '28px' },
+            "letter-spacing": { value: '0.15px' },
+            "font-weight": { value: '500' },
+            "font-family": { value: '{font.family.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "subheading": {
+            "font-size": { value: '15px' },
+            "line-height": { value: '20px' },
+            "letter-spacing": { value: '0.15px' },
+            "font-weight": { value: '700' },
+            "font-family": { value: '{font.family.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "body": {
+            "font-size": { value: '15px' },
+            "line-height": { value: '20px' },
+            "letter-spacing": { value: '0.15px' },
+            "font-weight": { value: 'normal' },
+            "font-family": { value: '{font.family.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "body-tabular": {
+            "font-size": { value: '15px' },
+            "line-height": { value: '20px' },
+            "letter-spacing": { value: '0.15px' },
+            "font-weight": { value: 'normal' },
+            "font-family": { value: '{font.family.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: '"tnum" on' }
+        },
+        "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}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { 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}' },
+            "text-transform": { value: 'uppercase' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "body-mono": {
+            "font-size": { value: '15px' },
+            "line-height": { value: '20px' },
+            "letter-spacing": { value: 'normal' },
+            "font-weight": { value: 'normal' },
+            "font-family": { value: '{font.family.monospace}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "caption": {
+            "font-size": { value: '13px' },
+            "line-height": { value: '16px' },
+            "letter-spacing": { value: '0.25px' },
+            "font-weight": { value: 'normal' },
+            "font-family": { value: '{font.family.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "caption-tabular": {
+            "font-size": { value: '13px' },
+            "line-height": { value: '16px' },
+            "letter-spacing": { value: '0.25px' },
+            "font-weight": { value: 'normal' },
+            "font-family": { value: '{font.family.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: '"tnum" on' }
+        },
+        "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}' },
+            "text-transform": { value: 'uppercase' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "caption-mono": {
+            "font-size": { value: '13px' },
+            "line-height": { value: '16px' },
+            "letter-spacing": { value: 'normal' },
+            "font-weight": { value: 'normal' },
+            "font-family": { value: '{font.family.monospace}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "small-text": {
+            "font-size": { value: '13px' },
+            "line-height": { value: '16px' },
+            "letter-spacing": { value: '0.25px' },
+            "font-weight": { value: 'normal' },
+            "font-family": { value: '{font.family.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "extra-small-text": {
+            "font-size": { value: '11px' },
+            "line-height": { value: '16px' },
+            "letter-spacing": { value: '0.22px' },
+            "font-weight": { value: 'normal' },
+            "font-family": { value: '{font.family.base}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { 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}' },
+            "text-transform": { value: 'uppercase' },
+            "font-feature-settings": { value: 'null' }
+        },
+        "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}' },
+            "text-transform": { value: 'null' },
+            "font-feature-settings": { value: 'null' }
+        }
+    }
+}

package/design-tokens/pt-2022/tokens/components/alert.json5

@@ -0,0 +1,83 @@
+{
+    alert: {
+        'light-color-scheme': {
+            error: {
+                background: { value: '{light-color-scheme.error.palette.value.40}' },
+                border: { value: '{light-color-scheme.error.palette.value.100}' },
+                icon: { value: '{light-color-scheme.error.palette.value.300}' }
+            },
+            warning: {
+                background: { value: '{light-color-scheme.warning.palette.value.40}' },
+                border: { value: '{light-color-scheme.warning.palette.value.100}' },
+                icon: { value: '{light-color-scheme.warning.palette.value.300}' }
+            },
+            success: {
+                background: { value: '{light-color-scheme.success.palette.value.40}' },
+                border: { value: '{light-color-scheme.success.palette.value.100}' },
+                icon: { value: '{light-color-scheme.success.palette.value.300}' }
+            },
+            info: {
+                background: { value: '{light-color-scheme.info.palette.value.40}' },
+                border: { value: '{light-color-scheme.info.palette.value.100}' },
+                icon: { value: '{light-color-scheme.info.palette.value.300}' }
+            },
+            default: {
+                background: { value: '{light-color-scheme.second.palette.value.40}' },
+                border: { value: '{light-color-scheme.second.palette.value.100}' },
+                icon: { value: '{light-color-scheme.second.palette.value.300}' }
+            }
+        },
+        'dark-color-scheme': {
+            error: {
+                background: { value: '{dark-color-scheme.error.palette.value.900}' },
+                border: { value: '{dark-color-scheme.error.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.error.palette.value.300}' }
+            },
+            warning: {
+                background: { value: '{dark-color-scheme.warning.palette.value.800}' },
+                border: { value: '{dark-color-scheme.warning.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.warning.palette.value.300}' }
+            },
+            success: {
+                background: { value: '{dark-color-scheme.success.palette.value.800}' },
+                border: { value: '{dark-color-scheme.success.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.success.palette.value.300}' }
+            },
+            info: {
+                background: { value: '{dark-color-scheme.info.palette.value.800}' },
+                border: { value: '{dark-color-scheme.info.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.info.palette.value.300}' }
+            },
+            default: {
+                background: { value: '{dark-color-scheme.second.palette.value.800}' },
+                border: { value: '{dark-color-scheme.second.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.second.palette.value.300}' }
+            }
+        },
+        size: {
+            'border-width': { value: '1px' },
+            'border-radius': { value: '4px' },
+
+            'horizontal-padding': { value: '{padding.control-horizontal}' },
+            'vertical-padding': { value: '13px' },
+
+            'icon-margin': { value: '{margin.iconText_M-horizontal}' },
+
+            'close-button-width': { value: '16px' },
+
+            small: {
+                'vertical-padding': { value: '11px' }
+            }
+        },
+        font: {
+            default: {
+                header: { value: 'subheading' },
+                body: { value: 'body' }
+            },
+            small: {
+                header: { value: 'caption' },
+                body: { value: 'caption' }
+            }
+        }
+    }
+}

package/design-tokens/pt-2022/tokens/components/autocomplete.json5

@@ -0,0 +1,11 @@
+{
+    autocomplete: {
+        size: {
+            panel: {
+                padding: { value: '4px 0' },
+                'max-height': { value: '256px' },
+                'border-radius': { value: '3px' }
+            }
+        }
+    }
+}

package/design-tokens/pt-2022/tokens/components/badge.json5

@@ -0,0 +1,174 @@
+{
+    badge: {
+        'light-color-scheme': {
+            solid: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.400}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.400}' },
+                    color: { value: 'white' },
+                },
+                info: {
+                    background: { value: '{light-color-scheme.info.palette.value.400}' },
+                    border: { value: '{light-color-scheme.info.palette.value.400}' },
+                    color: { value: 'white' }
+                },
+                success: {
+                    background: { value: '{light-color-scheme.success.palette.value.400}' },
+                    border: { value: '{light-color-scheme.success.palette.value.400}' },
+                    color: { value: 'white' }
+                },
+                warning: {
+                    background: { value: '{light-color-scheme.warning.palette.value.400}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.400}' },
+                    color: { value: 'white' }
+                },
+                error: {
+                    background: { value: '{light-color-scheme.error.palette.value.400}' },
+                    border: { value: '{light-color-scheme.error.palette.value.400}' },
+                    color: { value: 'white' }
+                },
+                transparent: {
+                    background: { value: 'transparent' },
+                    border: { value: '{light-color-scheme.second.palette.value.200}' },
+                    color: { value: '{light-color-scheme.second.palette.value.900}' },
+                },
+                light: {
+                    background: { value: '{light-color-scheme.second.palette.value.100}' },
+                    border: { value: '{light-color-scheme.second.palette.value.100}' },
+                    color: { value: '{light-color-scheme.second.palette.value.900}' }
+                },
+                second: {
+                    background: { value: '{light-color-scheme.second.palette.value.400}' },
+                    border: { value: '{light-color-scheme.second.palette.value.400}' },
+                    color: { value: 'white' }
+                }
+            },
+            pastel: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.40}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.200}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.400}' }
+                },
+                info: {
+                    background: { value: '{light-color-scheme.info.palette.value.40}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.200}' },
+                    color: { value: '{light-color-scheme.info.palette.value.400}' }
+                },
+                success: {
+                    background: { value: '{light-color-scheme.success.palette.value.40}' },
+                    border: { value: '{light-color-scheme.success.palette.value.200}' },
+                    color: { value: '{light-color-scheme.success.palette.value.500}' }
+                },
+                warning: {
+                    background: { value: '{light-color-scheme.warning.palette.value.40}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.200}' },
+                    color: { value: '{light-color-scheme.warning.palette.value.500}' }
+                },
+                error: {
+                    background: { value: '{light-color-scheme.error.palette.value.40}' },
+                    border: { value: '{light-color-scheme.error.palette.value.200}' },
+                    color: { value: '{light-color-scheme.error.palette.value.500}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            pastel: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.800}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.600}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.200}' },
+                },
+                info: {
+                    background: { value: '{light-color-scheme.info.palette.value.800}' },
+                    border: { value: '{light-color-scheme.info.palette.value.600}' },
+                    color: { value: '{light-color-scheme.info.palette.value.200}' },
+                },
+                success: {
+                    background: { value: '{light-color-scheme.success.palette.value.800}' },
+                    border: { value: '{light-color-scheme.success.palette.value.600}' },
+                    color: { value: '{light-color-scheme.success.palette.value.200}' }
+                },
+                warning: {
+                    background: { value: '{light-color-scheme.warning.palette.value.800}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.600}' },
+                    color: { value: '{light-color-scheme.warning.palette.value.200}' }
+                },
+                error: {
+                    background: { value: '{light-color-scheme.error.palette.value.800}' },
+                    border: { value: '{light-color-scheme.error.palette.value.600}' },
+                    color: { value: '{light-color-scheme.error.palette.value.200}' }
+                }
+            },
+            solid: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.560}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.560}' },
+                    color: { value: 'white' },
+                },
+                info: {
+                    background: { value: '{light-color-scheme.info.palette.value.560}' },
+                    border: { value: '{light-color-scheme.info.palette.value.560}' },
+                    color: { value: 'white' }
+                },
+                success: {
+                    background: { value: '{light-color-scheme.success.palette.value.560}' },
+                    border: { value: '{light-color-scheme.success.palette.value.560}' },
+                    color: { value: 'white' }
+                },
+                warning: {
+                    background: { value: '{light-color-scheme.warning.palette.value.560}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.560}' },
+                    color: { value: 'white' }
+                },
+                error: {
+                    background: { value: '{light-color-scheme.error.palette.value.560}' },
+                    border: { value: '{light-color-scheme.error.palette.value.560}' },
+                    color: { value: 'white' }
+                },
+                transparent: {
+                    background: { value: 'transparent' },
+                    border: { value: '{light-color-scheme.second.palette.value.560}' },
+                    color: { value: 'white' },
+                },
+                light: {
+                    background: { value: '{light-color-scheme.second.palette.value.400}' },
+                    border: { value: '{light-color-scheme.second.palette.value.400}' },
+                    color: { value: 'white' }
+                },
+                second: {
+                    background: { value: '{light-color-scheme.second.palette.value.560}' },
+                    border: { value: '{light-color-scheme.second.palette.value.560}' },
+                    color: { value: 'white' }
+                }
+            }
+        },
+        size: {
+            default: {
+                height: { value: '{size.xxl}' },
+                'min-width': { value: '10px' },
+                padding: { value: '0 8px' },
+                'border-width': { value: '1px' },
+                'border-radius': { value: '4px' }
+            },
+            mini: {
+                height: { value: '{size.l}' },
+                'min-width': { value: '10px' },
+                'border-width': { value: '1px' },
+                'border-radius': { value: '2px' },
+                padding: { value: '0 4px' }
+            }
+        },
+        font: {
+            default: {
+                default: { value: 'caption' },
+                caps: { value: 'caption-caps' },
+                mono: { value: 'caption-mono'}
+            },
+            mini: {
+                default: { value: 'extra-small-text' },
+                caps: { value: 'extra-small-text-caps' },
+                mono: { value: 'extra-small-text-mono'}
+            }
+        }
+    }
+}

package/design-tokens/pt-2022/tokens/components/button-toggle.json5

@@ -0,0 +1,10 @@
+{
+    'button-toggle': {
+        size: {
+            border: {
+                size: { value: '1px' },
+                radius: { value: '3px' }
+            }
+        }
+    }
+}