@ptsecurity/mosaic 13.1.0 → 13.3.0

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

@@ -1,30 +0,0 @@
-{
-    sidepanel: {
-        'light-color-scheme': {
-            border: { value: '{light-color-scheme.foreground.border.value}' }
-        },
-        'dark-color-scheme': {
-            border: { value: '{dark-color-scheme.second.palette.value.900.value}' }
-        },
-        font: {
-            default: { value: 'body' }
-        }
-    },
-    'sidepanel-header': {
-        size: {
-            padding: { value: '14px 16px' },
-            'close-padding': { value: '0 0 0 8px' }
-        },
-        font: {
-            default: { value: 'title' }
-        }
-    },
-    'sidepanel-footer': {
-        size: {
-            padding: { value: '16px' }
-        },
-        font: {
-            default: { value: 'body' }
-        }
-    }
-}

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

@@ -1,15 +0,0 @@
-{
-    table: {
-        size: {
-            'border-width': { value: '1px' },
-            'row-padding': {
-                vertical: { value: '8px' },
-                horizontal: { value: '16px' }
-            }
-        },
-        font: {
-            header: { value: 'caption' },
-            body: { value: 'body' }
-        }
-    }
-}

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

@@ -1,25 +0,0 @@
-{
-    tabs: {
-        'light-color-scheme': {
-            border: { value: '{light-color-scheme.foreground.divider.value}' },
-            'state-active': { value: '{light-color-scheme.primary.default.value}' },
-            'state-disabled-overlay': { value: '{light-color-scheme.background.overlay-disabled.value}' }
-        },
-        'dark-color-scheme': {
-            border: { value: '{dark-color-scheme.foreground.divider.value}' },
-            'state-active': { value: '{dark-color-scheme.primary.default.value}' },
-            'state-disabled-overlay': { value: '{dark-color-scheme.background.overlay-disabled.value}' }
-        },
-        size: {
-            height: { value: '40px' },
-            'highlight-height': { value: '4px' },
-            'padding-horizontal': { value: '16px' },
-            'border-width': { value: '1px' },
-            'border-radius': { value: '3px' },
-            'label-icon-margin': { value: '{margin.iconText_M-horizontal}' }
-        },
-        font: {
-            default: { value: 'body' }
-        }
-    }
-}

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

@@ -1,132 +0,0 @@
-{
-    tags: {
-        'light-color-scheme': {
-            primary: {
-                background: { value: '{light-color-scheme.primary.palette.value.60.value}' },
-                border: { value: '{light-color-scheme.primary.palette.value.60.value}' },
-                text: { value: '{light-color-scheme.primary.default.value}' },
-                icon: { value: 'mix({light-color-scheme.primary.palette.value.300.value}, {light-color-scheme.background.overlay-hover.value})' },
-                states:  {
-                    hover: {
-                        icon: { value: '{light-color-scheme.primary.palette.value.560.value}' }
-                    },
-                    focused:{ value: '{light-color-scheme.states.focused-color.value}' },
-                    disabled: {
-                        text: { value: 'mix({light-color-scheme.primary.palette.value.500.value}, transparent, 50%)' },
-                        background: { value: 'mix({light-color-scheme.primary.palette.value.500.value}, transparent, 10%)' }
-                    }
-                }
-            },
-            second: {
-                background: { value: '{light-color-scheme.second.palette.value.100.value}' },
-                border: { value: '{light-color-scheme.second.palette.value.100.value}' },
-                text: { value: '{light-color-scheme.foreground.text.value}' },
-                icon: { value: 'mix({light-color-scheme.second.palette.value.300.value}, {light-color-scheme.background.overlay-hover.value})' },
-                states: {
-                    hover: {
-                        icon: { value: '{light-color-scheme.second.palette.value.560.value}' }
-                    },
-                    focused: { value: '{light-color-scheme.states.focused-color.value}' },
-                    disabled: {
-                        text: { value: 'mix({light-color-scheme.second.palette.value.300.value}, transparent, 50%)' },
-                        background: { value: 'mix({light-color-scheme.second.palette.value.300.value}, transparent, 10%)' }
-                    }
-                }
-            },
-            error: {
-                background: { value: '{light-color-scheme.error.palette.value.60.value}' },
-                border: { value: '{light-color-scheme.error.palette.value.60.value}' },
-                text: { value: '{light-color-scheme.error.default.value}' },
-                icon: { value: 'mix({light-color-scheme.error.palette.value.300.value}, {light-color-scheme.background.overlay-hover.value})' },
-                states: {
-                    hover: {
-                        icon: { value: '{light-color-scheme.error.palette.value.500.value}' }
-                    },
-                    focused: { value: '{light-color-scheme.states.focused-color-error.value}' },
-                    disabled: {
-                        text: { value: 'mix({light-color-scheme.error.palette.value.400.value}, transparent, 50%)' },
-                        background: { value: 'mix({light-color-scheme.error.palette.value.400.value}, transparent, 10%)' }
-                    }
-                }
-            }
-        },
-        'dark-color-scheme': {
-            primary: {
-                background: { value: '{dark-color-scheme.primary.palette.value.700.value}' },
-                border: { value: '{dark-color-scheme.primary.palette.value.700.value}' },
-                text: { value: '{dark-color-scheme.primary.palette.value.200.value}' },
-                icon: { value: 'mix({dark-color-scheme.primary.palette.value.200.value}, {dark-color-scheme.background.overlay-hover.value})' },
-                states: {
-                    hover: {
-                        icon: { value: '{dark-color-scheme.primary.palette.value.500.value}' }
-                    },
-                    focused:{ value: '{dark-color-scheme.states.focused-color.value}' },
-                    disabled: {
-                        text: { value: 'mix({dark-color-scheme.primary.palette.value.300.value}, transparent, 50%)' },
-                        background: { value: 'mix({dark-color-scheme.primary.palette.value.300.value}, transparent, 10%)' }
-                    }
-                }
-            },
-            second: {
-                background: { value: '{dark-color-scheme.second.palette.value.700.value}' },
-                border: { value: '{dark-color-scheme.second.palette.value.700.value}' },
-                text: { value: '{dark-color-scheme.second.palette.value.200.value}' },
-                icon: { value: 'mix({dark-color-scheme.second.palette.value.300.value}, {dark-color-scheme.background.overlay-hover.value})' },
-                states: {
-                    hover: {
-                        icon: { value: '{dark-color-scheme.second.palette.value.100.value}' }
-                    },
-                    focused: { value: '{dark-color-scheme.states.focused-color.value}' },
-                    disabled: {
-                        text: { value: 'mix({dark-color-scheme.second.palette.value.400.value}, transparent, 50%)' },
-                        background: { value: 'mix({dark-color-scheme.second.palette.value.400.value}, transparent, 10%)' }
-                    }
-                }
-            },
-            error: {
-                background: { value: '{dark-color-scheme.error.palette.value.700.value}' },
-                border: { value: '{dark-color-scheme.error.palette.value.700.value}' },
-                text: { value: '{dark-color-scheme.error.palette.value.200.value}' },
-                icon: { value: 'mix({dark-color-scheme.error.palette.value.300.value}, {dark-color-scheme.background.overlay-hover.value})' },
-                states: {
-                    hover: {
-                        icon: { value: '{dark-color-scheme.error.palette.value.300.value}' }
-                    },
-                    focused: { value: '{dark-color-scheme.states.focused-color-error.value}' },
-                    disabled: {
-                        text: { value: 'mix({dark-color-scheme.error.palette.value.400.value}, transparent, 50%)' },
-                        background: { value: 'mix({dark-color-scheme.error.palette.value.400.value}, transparent, 10%)' }
-                    }
-                }
-            }
-        },
-        size: {
-            margin: { value: '2px' },
-            height: { value: '{size.badge_tag-height}' },
-            'border-width': { value: '1px' },
-            'border-radius': { value: '4px' },
-            'icon-padding': { value: '3px' },
-            'text-margin': { value: '{padding.badge_tag-horizontal}' }
-        },
-        font: {
-            default: { value: 'caption' },
-            mono: { value: 'caption-mono' },
-            caps: { value: 'caption-caps' }
-        }
-    },
-    'tag-list': {
-        size: {
-            padding: { value: '1px 6px' },
-            'min-height': { value: '30px' }
-        }
-    },
-    'tag-input': {
-        size: {
-            height: { value: '22px' },
-            margin: { value: '2px 4px' }
-        },
-        font: {
-            default: { value: 'body' }
-        }
-    }
-}

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

@@ -1,12 +0,0 @@
-{
-    textarea: {
-        size: {
-            'min-height': { value: '50px' },
-            padding: { value: '5px 16px' }
-        },
-        font: {
-            default: { value: 'body' },
-            mono: { value: 'body-mono' }
-        }
-    }
-}

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

@@ -1,7 +0,0 @@
-{
-    'timepicker': {
-        size: {
-            'padding-right': { value: '16px' }
-        }
-    }
-}

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

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

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

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

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

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

@@ -1,112 +0,0 @@
-{
-    '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

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

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

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