@ptsecurity/mosaic 13.0.0 → 13.1.0

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

@@ -0,0 +1,79 @@
+{
+    toggle: {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.border.value}' },
+            background: {
+                value: '{light-color-scheme.background.background.value}'
+            },
+            'circle-border': { value: '{light-color-scheme.foreground.border.value}' },
+            'circle-background': { value: '{light-color-scheme.second.palette.value.100.value}'
+            },
+            states: {
+                focused: {
+                    shadow: {
+                        value: 'inset 0 0 0 1px {light-color-scheme.background.background.value}, 0 0 0 2px {light-color-scheme.primary.palette.value.500.value}'
+                    }
+                }
+            },
+            primary: {
+                checked: {
+                    'border-color': { value: '{light-color-scheme.primary.default.value}'},
+                    background: { value: '{light-color-scheme.primary.default.value}'}
+                }
+            },
+            error: {
+                checked: {
+                    'border-color': { value: '{light-color-scheme.error.default.value}'},
+                    background: { value: '{light-color-scheme.error.default.value}'}
+                }
+            }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.border.value}' },
+            background: {
+                value: '{dark-color-scheme.background.background.value}'
+            },
+            'circle-border': { value: '{dark-color-scheme.foreground.border.value}' },
+            'circle-background': { value: '{light-color-scheme.second.palette.value.500.value}' },
+
+            states: {
+                focused: {
+                    shadow: {
+                        value: 'inset 0 0 0 1px {dark-color-scheme.background.background.value}, 0 0 0 2px {dark-color-scheme.primary.palette.value.400.value}'
+                    }
+                }
+            },
+            primary: {
+                checked: {
+                    'border-color': { value: '{dark-color-scheme.primary.default.value}'},
+                    background: { value: '{dark-color-scheme.primary.default.value}'}
+                }
+            },
+            error: {
+                checked: {
+                    'border-color': { value: '{dark-color-scheme.error.default.value}'},
+                    background: { value: '{dark-color-scheme.error.default.value}'}
+                }
+            }
+        },
+        size: {
+            height: { value: '16px' },
+            width: { value: '28px' },
+            'border-radius': { value: '9px' },
+            'label-margin': { value: '{margin.iconText_M-horizontal}' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    },
+    'toggle-small': {
+        size: {
+            height: { value: '14px' },
+            width: { value: '24px' },
+            'border-radius': { value: '8px' }
+        },
+        font: {
+            default: { value: 'caption' }
+        }
+    }
+}

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

@@ -0,0 +1,83 @@
+{
+    tooltip: {
+        'light-color-scheme': {
+            background: { value: '{popup.dark-color-scheme.background.value}' },
+            text: { value: '{dark-color-scheme.foreground.text.value}' },
+            border: { value: 'transparent' },
+            shadow: { value: '0 2px 4px 0 rgba(39, 51, 62, 0.2)' },
+
+            'warning': {
+                background: { value: '{light-color-scheme.warning.palette.value.40.value}' },
+                text: { value: '{light-color-scheme.foreground.text.value}' },
+                border: { value: '{light-color-scheme.warning.palette.value.100.value}' }
+            }
+        },
+        'dark-color-scheme': {
+            background: { value: '{popup.light-color-scheme.background.value}' },
+            text: { value: '{light-color-scheme.foreground.text.value}' },
+            border: { value: 'transparent' },
+            shadow: { value: '0 2px 4px 0 rgba(39, 51, 62, 0.2)' },
+
+            'warning': {
+                background: { value: '{dark-color-scheme.warning.palette.value.560.value}' },
+                text: { value: '{dark-color-scheme.foreground.text.value}' },
+                border: { value: '{dark-color-scheme.warning.palette.value.560.value}' }
+            }
+        },
+        size: {
+            'max-width': { value: '300px' },
+            'border-width': { value: '1px' },
+            'border-radius': { value: '3px' },
+            padding: { value: '8px 16px' },
+            'arrow-size': { value: '12px' },
+            'trigger-margin': { value: '9px' }
+        },
+        font: {
+            default: { value: 'caption' }
+        }
+    },
+    'extended-tooltip': {
+        'light-color-scheme': {
+            background: { value: '{popup.light-color-scheme.background.value}' },
+            text: { value: '{light-color-scheme.foreground.text.value}' },
+            border: { value: '{popup.light-color-scheme.border.value}' },
+            shadow: { value: '0 2px 4px 0 rgba(39, 51, 62, 0.2)' },
+        },
+        'dark-color-scheme': {
+            background: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+            text: { value: '{dark-color-scheme.foreground.text.value}' },
+            border: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+            shadow: { value: '0 2px 4px 0 rgba(39, 51, 62, 0.2)' },
+        },
+        size: {
+            'border-radius': { value: '3px' },
+            'arrow-size': { value: '12px' },
+            'trigger-margin': { value: '9px' },
+            padding: { value: '8px 16px' },
+            'max-height': { value: '480px' }
+        },
+        font: {
+            default: { value: 'caption' }
+        }
+    },
+    'extended-tooltip-header': {
+        'light-color-scheme': {
+            border: { value: '{popup.light-color-scheme.border.value}' },
+            text: { value: '{light-color-scheme.foreground.text.value}' },
+            background: { value: '{popup.light-color-scheme.background.value}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.second.palette.value.600.value}' },
+            text: { value: '{dark-color-scheme.foreground.text.value}' },
+            background: { value: '{dark-color-scheme.second.palette.value.700.value}' }
+        },
+        size: {
+            height: { value: '40px' },
+            padding: { value: '10px 16px' }
+        },
+        font: {
+            default: { value: 'subheading' }
+        }
+    }
+
+}

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

@@ -0,0 +1,12 @@
+{
+    tree: {
+        size: {
+            'node-height': { value: '32px' },
+            'padding-left': { value: '8px' },
+            'padding-right': { value: '16px' },
+        },
+        font: {
+            node: { value: 'body' }
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+{
+
+}

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

@@ -0,0 +1,112 @@
+{
+    'light-color-scheme': {
+        primary: {
+            default: { value: '{palette.blue.500.value}' },
+
+            palette: { value: '{palette.blue}' }
+        },
+        second: {
+            default: { value: '{palette.grey.500.value}' },
+
+            palette: { value: '{palette.grey}' }
+        },
+        error: {
+            default: { value: '{palette.red.500.value}' },
+
+            palette: { value: '{palette.red}' }
+        },
+        info: {
+            default: { value: '{palette.blue.500.value}' },
+
+            palette: { value: '{palette.teal}' }
+        },
+        success: {
+            default: { value: '{palette.green.500.value}' },
+
+            palette: { value: '{palette.green}' }
+        },
+        warning: {
+            default: { value: '{palette.yellow.500.value}' },
+
+            palette: { value: '{palette.yellow}' }
+        },
+        foreground: {
+            text: { value: '{palette.grey.900.value}' },
+            'text-less-contrast': { value: '{palette.grey.500.value}'},
+            'text-disabled': { value: '{palette.grey.300.value}' },
+            divider: { value: '{palette.grey.100.value}' },
+            border: { value: '{palette.grey.200.value}' },
+            icon: { value: '{palette.grey.300.value}' }
+        },
+        background: {
+            background: { value: 'white' },
+            'background-disabled': { value: '{palette.grey.40.value}' },
+
+            'overlay-hover': { value: 'rgba(black, 0.05)' },
+            'overlay-active': { value: 'rgba(black, 0.1)' },
+            'overlay-disabled': { value: 'rgba(white, 0.3)' }
+        },
+        states: {
+            'focused-color': { value: '{light-color-scheme.primary.palette.value.500.value}' },
+            'focused-color-error': { value: '{light-color-scheme.error.palette.value.500.value}' },
+            'selected-color': { value: '{light-color-scheme.primary.palette.value.60.value}' },
+            'pressed-shadow': { value: 'inset 0 1px 2px 0 rgba(black, 0.2)' },
+            'disabled-opacity': { value: 0.3 }
+        }
+    },
+    'dark-color-scheme': {
+        primary: {
+            default: { value: '{palette.blue.560.value}' },
+
+            palette: { value: '{palette.blue}' }
+        },
+        second: {
+            default: { value: '{palette.grey.560.value}' },
+
+            palette: { value: '{palette.grey}' }
+        },
+        error: {
+            default: { value: '{palette.red.560.value}' },
+
+            palette: { value: '{palette.red}' }
+        },
+        info: {
+            default: { value: '{palette.teal.560.value}' },
+
+            palette: { value: '{palette.teal}' }
+        },
+        success: {
+            default: { value: '{palette.green.560.value}' },
+
+            palette: { value: '{palette.green}' }
+        },
+        warning: {
+            default: { value: '{palette.yellow.560.value}' },
+
+            palette: { value: '{palette.yellow}' }
+        },
+        foreground: {
+            text: { value: '{palette.grey.40.value}' },
+            'text-less-contrast': { value: '{palette.grey.300.value}'},
+            'text-disabled': { value: '{palette.grey.500.value}' },
+            divider: { value: '{palette.grey.700.value}' },
+            border: { value: '{palette.grey.560.value}' },
+            icon: { value: '{palette.grey.300.value}' }
+        },
+        background: {
+            background: { value: '{palette.grey.900.value}' },
+            'background-disabled': { value: '{palette.grey.700.value}' },
+
+            'overlay-hover': { value: 'rgba(black, 0.05)' },
+            'overlay-active': { value: 'rgba(black, 0.1)' },
+            'overlay-disabled': { value: 'rgba(black, 0.2)' }
+        },
+        states: {
+            'focused-color': { value: '{dark-color-scheme.primary.palette.value.400.value}' },
+            'focused-color-error': { value: '{light-color-scheme.error.palette.value.560.value}' },
+            'selected-color': { value: '{dark-color-scheme.primary.palette.value.600.value}' },
+            'pressed-shadow': { value: 'inset 1px 2px 2px 0 rgba(black, 0.2)' },
+            'disabled-opacity': { value: 0.3 }
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+{
+    font: {
+        family: {
+            accent: {
+                value: "'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif"
+            },
+            base: {
+                value: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif"
+            },
+            monospace: {
+                value: "'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+{
+    size: {
+        'option-height': '32px',
+        'panel-height': '48px',
+        // у radio и checkbox в макетах 20px, у тоггла есть две модификации на 16px и 14px
+        'control_S-height': '16px',
+        // в form-field это реализовано через отступы
+        'control_M-height': '32px',
+        // этого нет сейчас
+        'button-minWidth': '64px',
+        // badge на padding
+        'badge_tag-height': '24px',
+        // modal; sidepanel - сейчас в этих компонентах paddings
+        'header-height': '56px',
+        'footer-height': '64px'
+    },
+    padding: {
+        'control-horizontal': '16px',
+        'option-horizontal': '16px',
+        'badge_tag-horizontal': '8px',
+        'header-right': '8px',
+        'headerFooter-horizontal': '16px',
+    },
+    margin: {
+        // у radio-group нет таких отступов, а у checkbox вообще нет группы
+        'controlGroup_S-vertical': '8px',
+        'iconText_M-horizontal': '8px',
+        'iconText_S-horizontal': '4px'
+    }
+}

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

@@ -0,0 +1,3 @@
+{
+
+}

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

@@ -0,0 +1,226 @@
+{
+    "palette": {
+        "blue": {
+            "40": { value: '#eff6ff' },
+            "60": { value: '#e7f1ff' },
+            "100": { value: '#c8dfff' },
+            "200": { value: '#a2c7fe' },
+            "300": { value: '#5697ff' },
+            "400": { value: '#4187ff' },
+            "500": { value: '#0374eb' },
+            "560": { value: '#0059b8' },
+            "600": { value: '#014b9d' },
+            "700": { value: '#023c7f' },
+            "800": { value: '#193060' },
+            "900": { value: '#00224f' },
+            "A100": { value: 'rgba(3, 116, 235, 0.15)' },
+            "A200": { value: 'rgba(3, 116, 235, 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: '#ecf9ef' },
+            "60": { value: '#d2f7db' },
+            "100": { value: '#b6ebc3' },
+            "200": { value: '#8ed5a1' },
+            "300": { value: '#4ba96c' },
+            "400": { value: '#319d5c' },
+            "500": { value: '#028b49' },
+            "560": { value: '#016b37' },
+            "600": { value: '#015a2d' },
+            "700": { value: '#004823' },
+            "800": { value: '#103920' },
+            "900": { value: '#002a12' },
+            "A100": { value: 'rgba(2, 139, 73, 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: '#fff3f3' },
+            "60": { value: '#ffeaea' },
+            "100": { value: '#fbd6d6' },
+            "200": { value: '#fcb2b4' },
+            "300": { value: '#ee6f79' },
+            "400": { value: '#ea5868' },
+            "500": { value: '#db3c55' },
+            "560": { value: '#b9023a' },
+            "600": { value: '#9e0130' },
+            "700": { value: '#800025' },
+            "800": { value: '#621420' },
+            "900": { value: '#500013' },
+            "A100": { value: 'rgba(219, 60, 85, 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: '#f2f5f9' },
+            "60": { value: '#ebeef2' },
+            "100": { value: '#d7dee4' },
+            "200": { value: '#bdc7d1' },
+            "300": { value: '#8c99a5' },
+            "400": { value: '#7f8c98' },
+            "500": { value: '#6d7a86' },
+            "560": { value: '#515e69' },
+            "600": { value: '#434f5a' },
+            "700": { value: '#333f4a' },
+            "800": { value: '#27333e' },
+            "900": { value: '#19252f' },
+            "A40": { value: 'rgba(25, 37, 47, 0.04)' },
+            "A60": { value: 'rgba(25, 37, 47, 0.06)' },
+            "A100": { value: 'rgba(25, 37, 47, 0.1)' },
+            "A200": { value: 'rgba(25, 37, 47, 0.2)' },
+            "A300": { value: 'rgba(25, 37, 47, 0.3)' },
+            "A500": { value: 'rgba(25, 37, 47, 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: '#fff4dd' },
+            "60": { value: '#ffecce' },
+            "100": { value: '#fcdda6' },
+            "200": { value: '#f5c23c' },
+            "300": { value: '#e19f12' },
+            "400": { value: '#c78816' },
+            "500": { value: '#a26e0c' },
+            "560": { value: '#7e5406' },
+            "600": { value: '#6b4804' },
+            "700": { value: '#543803' },
+            "800": { value: '#3e3015' },
+            "900": { value: '#312001' },
+            "A100": { value: 'rgba(255, 159, 18, 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' }
+            }
+        },
+        "teal": {
+            "40": { value: '#ebf8fd' },
+            "60": { value: '#d9f3fd' },
+            "100": { value: '#afe6f9' },
+            "200": { value: '#6ed3f2' },
+            "300": { value: '#18a5c5' },
+            "400": { value: '#2099b7' },
+            "500": { value: '#218ca8' },
+            "560": { value: '#0c6579' },
+            "600": { value: '#0c5567' },
+            "700": { value: '#084453' },
+            "800": { value: '#143641' },
+            "900": { value: '#022731' },
+            "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' }
+            }
+        },
+        "purple": {
+            "40": { value: '#fff3fb' },
+            "60": { value: '#ffe9f8' },
+            "100": { value: '#f2d4e8' },
+            "200": { value: '#e4bbd7' },
+            "300": { value: '#c692b5' },
+            "400": { value: '#bb78a7' },
+            "500": { value: '#a65d92' },
+            "560": { value: '#864775' },
+            "600": { value: '#753865' },
+            "700": { value: '#612853' },
+            "800": { value: '#48273f' },
+            "900": { value: '#36172e' },
+            "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' }
+            }
+        }
+    },
+
+    "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}' } },
+        "teal": { "palette": { value: '{palette.teal}' } },
+        "purple": { "palette": { value: '{palette.purple}' } }
+    }
+}