@ptsecurity/mosaic 13.3.0 → 13.3.1

package/design-tokens/legacy-2017/tokens/components/table.json5

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

package/design-tokens/legacy-2017/tokens/components/tabs.json5

@@ -0,0 +1,101 @@
+{
+    tabs: {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.300}' },
+
+            state: {
+                normal: {
+                    icon: { value: '{light-color-scheme.foreground.icon}' },
+                    text: { value: '{light-color-scheme.foreground.text}' }
+                },
+                hover: {
+                    icon: { value: '{light-color-scheme.foreground.text}' },
+                    text: { value: '{light-color-scheme.foreground.text}' }
+                },
+                active: {
+                    'marker-color': { value: '{light-color-scheme.primary.default}' }
+                },
+                empty: {
+                    icon: { value: '{light-color-scheme.foreground.text-disabled}' },
+                    text: { value: '{light-color-scheme.foreground.text-disabled}' }
+                },
+                disabled: {
+                    icon: { value: '{light-color-scheme.foreground.text-disabled}' },
+                    text: { value: '{light-color-scheme.foreground.text-disabled}' },
+                    'marker-opacity': { value: '0.3' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.second.palette.value.300}' },
+
+            state: {
+                normal: {
+                    icon: { value: '{dark-color-scheme.foreground.icon}' },
+                    text: { value: '{dark-color-scheme.foreground.text}' }
+                },
+                hover: {
+                    icon: { value: '{dark-color-scheme.foreground.text}' },
+                    text: { value: '{dark-color-scheme.foreground.text}' }
+                },
+                active: {
+                    'marker-color': { value: '{dark-color-scheme.primary.default}' }
+                },
+                empty: {
+                    icon: { value: '{dark-color-scheme.foreground.text-disabled}' },
+                    text: { value: '{dark-color-scheme.foreground.text-disabled}' }
+                },
+                disabled: {
+                    icon: { value: '{dark-color-scheme.foreground.text-disabled}' },
+                    text: { value: '{dark-color-scheme.foreground.text-disabled}' },
+                    'marker-opacity': { value: '0.3' }
+                }
+            }
+        },
+        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' }
+        }
+    },
+    'vertical-tabs': {
+        'light-color-scheme': {
+            state: {
+                normal: {
+                    background: { value: 'transparent' },
+                },
+                selected: {
+                    background: { value: '{light-color-scheme.states.selected-color}' },
+                },
+                hover: {
+                    background: { value: '{light-color-scheme.background.overlay-hover}' },
+                },
+                'hover-selected': {
+                    background: { value: 'adjust-color({light-color-scheme.states.selected-color}, $saturation:-22%, $lightness:-5%)' },
+                }
+            }
+        },
+        'dark-color-scheme': {
+            state: {
+                normal: {
+                    background: { value: 'transparent' },
+                },
+                selected: {
+                    background: { value: '{dark-color-scheme.states.selected-color}' },
+                },
+                hover: {
+                    background: { value: '{dark-color-scheme.background.overlay-hover}' },
+                },
+                'hover-selected': {
+                    background: { value: 'adjust-color({dark-color-scheme.states.selected-color}, $lightness:-1%)' },
+                }
+            }
+        }
+    }
+}

package/design-tokens/legacy-2017/tokens/components/tags.json5

@@ -0,0 +1,131 @@
+{
+    tags: {
+        'light-color-scheme': {
+            primary: {
+                background: { value: '{light-color-scheme.primary.palette.value.100}' },
+                border: { value: '{light-color-scheme.primary.palette.value.100}' },
+                text: { value: '{light-color-scheme.primary.default}' },
+                icon: { value: 'mix({light-color-scheme.primary.palette.value.400}, {light-color-scheme.background.overlay-hover})' },
+                states:  {
+                    hover: {
+                        icon: { value: '{light-color-scheme.primary.palette.value.600}' }
+                    },
+                    focused:{ value: '{light-color-scheme.primary.palette.value.500}' },
+                    disabled: {
+                        text: { value: 'mix({light-color-scheme.primary.palette.value.500}, transparent, 50%)' },
+                        background: { value: 'mix({light-color-scheme.primary.palette.value.500}, transparent, 10%)' }
+                    }
+                }
+            },
+            second: {
+                background: { value: '{light-color-scheme.second.palette.value.100}' },
+                border: { value: '{light-color-scheme.second.palette.value.100}' },
+                text: { value: '{light-color-scheme.foreground.text}' },
+                icon: { value: 'mix({light-color-scheme.second.palette.value.400}, {light-color-scheme.background.overlay-hover})' },
+                states: {
+                    hover: {
+                        icon: { value: '{light-color-scheme.second.palette.value.400}' }
+                    },
+                    focused: { value: '{light-color-scheme.primary.palette.value.500}' },
+                    disabled: {
+                        text: { value: 'mix({light-color-scheme.second.palette.value.300}, transparent, 50%)' },
+                        background: { value: 'mix({light-color-scheme.second.palette.value.300}, transparent, 10%)' }
+                    }
+                }
+            },
+            error: {
+                background: { value: '{light-color-scheme.error.palette.value.100}' },
+                border: { value: '{light-color-scheme.error.palette.value.100}' },
+                text: { value: '{light-color-scheme.error.default}' },
+                icon: { value: 'mix({light-color-scheme.error.palette.value.400}, {light-color-scheme.background.overlay-hover})' },
+                states: {
+                    hover: {
+                        icon: { value: '{light-color-scheme.error.palette.value.500}' }
+                    },
+                    focused: { value: '{light-color-scheme.error.palette.value.400}' },
+                    disabled: {
+                        text: { value: 'mix({light-color-scheme.error.palette.value.400}, transparent, 50%)' },
+                        background: { value: 'mix({light-color-scheme.error.palette.value.400}, transparent, 10%)' }
+                    }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            primary: {
+                background: { value: '{dark-color-scheme.primary.palette.value.700}' },
+                border: { value: '{dark-color-scheme.primary.palette.value.700}' },
+                text: { value: '{dark-color-scheme.primary.palette.value.200}' },
+                icon: { value: 'mix({dark-color-scheme.primary.palette.value.400}, {dark-color-scheme.background.overlay-hover})' },
+                states: {
+                    hover: {
+                        icon: { value: '{dark-color-scheme.primary.palette.value.500}' }
+                    },
+                    focused: { value: '{dark-color-scheme.primary.palette.value.400}' },
+                    disabled: {
+                        text: { value: 'mix({dark-color-scheme.primary.palette.value.400}, transparent, 50%)' },
+                        background: { value: 'mix({dark-color-scheme.primary.palette.value.400}, transparent, 10%)' }
+                    }
+                }
+            },
+            second: {
+                background: { value: '{dark-color-scheme.second.palette.value.700}' },
+                border: { value: '{dark-color-scheme.second.palette.value.700}' },
+                text: { value: '{dark-color-scheme.second.palette.value.200}' },
+                icon: { value: 'mix({dark-color-scheme.second.palette.value.400}, {dark-color-scheme.background.overlay-hover})' },
+                states: {
+                    hover: {
+                        icon: { value: '{dark-color-scheme.second.palette.value.100}' }
+                    },
+                    focused: { value: '{dark-color-scheme.primary.palette.value.400}' },
+                    disabled: {
+                        text: { value: 'mix({dark-color-scheme.second.palette.value.400}, transparent, 50%)' },
+                        background: { value: 'mix({dark-color-scheme.second.palette.value.400}, transparent, 10%)' }
+                    }
+                }
+            },
+            error: {
+                background: { value: '{dark-color-scheme.error.palette.value.700}' },
+                border: { value: '{dark-color-scheme.error.palette.value.700}' },
+                text: { value: '{dark-color-scheme.error.palette.value.200}' },
+                icon: { value: 'mix({dark-color-scheme.error.palette.value.400}, {dark-color-scheme.background.overlay-hover})' },
+                states: {
+                    hover: {
+                        icon: { value: '{dark-color-scheme.error.palette.value.200}' }
+                    },
+                    focused: { value: '{dark-color-scheme.error.palette.value.400}' },
+                    disabled: {
+                        text: { value: 'mix({dark-color-scheme.error.palette.value.400}, transparent, 50%)' },
+                        background: { value: 'mix({dark-color-scheme.error.palette.value.400}, transparent, 10%)' }
+                    }
+                }
+            }
+        },
+        size: {
+            margin: { value: '2px' },
+            height: { value: '{size.badge_tag-height}' },
+            'border-width': { value: '1px' },
+            'border-radius': { value: '4px' },
+            'icon-padding': { value: '{size.xxs}' },
+            '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' },
+        }
+    },
+    'tag-input': {
+        size: {
+            height: { value: '22px' },
+            margin: { value: '2px 4px' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    }
+}

package/design-tokens/legacy-2017/tokens/components/textarea.json5

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

package/design-tokens/legacy-2017/tokens/components/timepicker.json5

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

package/design-tokens/legacy-2017/tokens/components/toggle.json5

@@ -0,0 +1,79 @@
+{
+    toggle: {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.border}' },
+            background: {
+                value: 'linear-gradient(to bottom, {light-color-scheme.second.palette.value.100}, {light-color-scheme.background.background-disabled})'
+            },
+            'circle-border': { value: '{light-color-scheme.foreground.border}' },
+            'circle-background': { value: 'linear-gradient(to bottom, white, {light-color-scheme.second.palette.value.100})' },
+
+            states: {
+                focused: {
+                    shadow: {
+                        value: 'inset 0 0 0 1px {light-color-scheme.background.background}, 0 0 0 2px {light-color-scheme.primary.palette.value.500}'
+                    }
+                }
+            },
+            primary: {
+                checked: {
+                    'border-color': { value: '{light-color-scheme.primary.default}'},
+                    background: { value: '{light-color-scheme.primary.default}'}
+                }
+            },
+            error: {
+                checked: {
+                    'border-color': { value: '{light-color-scheme.error.default}'},
+                    background: { value: '{light-color-scheme.error.default}'}
+                }
+            }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.border}' },
+            background: {
+                value: '{dark-color-scheme.background.background}'
+            },
+            'circle-border': { value: '{dark-color-scheme.foreground.border}' },
+            'circle-background': { value: 'white' },
+
+            states: {
+                focused: {
+                    shadow: {
+                        value: 'inset 0 0 0 1px {dark-color-scheme.background.background}, 0 0 0 2px {dark-color-scheme.primary.palette.value.400}'
+                    }
+                }
+            },
+            primary: {
+                checked: {
+                    'border-color': { value: '{dark-color-scheme.primary.default}'},
+                    background: { value: '{dark-color-scheme.primary.default}'}
+                }
+            },
+            error: {
+                checked: {
+                    'border-color': { value: '{dark-color-scheme.error.default}'},
+                    background: { value: '{dark-color-scheme.error.default}'}
+                }
+            }
+        },
+        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/legacy-2017/tokens/components/tooltip.json5

@@ -0,0 +1,83 @@
+{
+    tooltip: {
+        'light-color-scheme': {
+            background: { value: '{light-color-scheme.second.palette.value.700}' },
+            text: { value: '{light-color-scheme.second.palette.value.contrast.700}' },
+            border: { value: 'transparent' },
+            shadow: { value: '0 2px 4px 0 rgba(0, 0, 0, 0.2)' },
+
+            'warning': {
+                background: { value: '{light-color-scheme.warning.palette.value.60}' },
+                text: { value: '{light-color-scheme.second.palette.value.700}' },
+                border: { value: '{light-color-scheme.warning.palette.value.200}' }
+            }
+        },
+        'dark-color-scheme': {
+            background: { value: '{dark-color-scheme.second.palette.value.40}' },
+            text: { value: '{dark-color-scheme.second.palette.value.contrast.40}' },
+            border: { value: 'transparent' },
+            shadow: { value: '0 2px 4px 0 rgba(0, 0, 0, 0.2)' },
+
+            'warning': {
+                background: { value: '{dark-color-scheme.warning.palette.value.60}' },
+                text: { value: '{dark-color-scheme.second.palette.value.700}' },
+                border: { value: '{dark-color-scheme.warning.palette.value.200}' }
+            }
+        },
+        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}' },
+            text: { value: '{light-color-scheme.foreground.text}' },
+            border: { value: '{popup.light-color-scheme.border}' },
+            shadow: { value: '0 2px 4px 0 rgba(0, 0, 0, 0.2)' }
+        },
+        'dark-color-scheme': {
+            background: { value: '{popup.dark-color-scheme.background}' },
+            text: { value: '{dark-color-scheme.foreground.text}' },
+            border: { value: '{popup.dark-color-scheme.border}' },
+            shadow: { value: '0 2px 4px 0 rgba(0, 0, 0, 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: '{light-color-scheme.second.palette.value.100}' },
+            text: { value: '{light-color-scheme.foreground.text}' },
+            background: { value: 'white' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.60}' },
+            text: { value: '{dark-color-scheme.foreground.text}' },
+            background: { value: '{light-color-scheme.second.palette.value.700}' }
+        },
+        size: {
+            height: { value: '40px' },
+            padding: { value: '10px 16px' }
+        },
+        font: {
+            default: { value: 'subheading' }
+        }
+    }
+
+}

package/design-tokens/legacy-2017/tokens/components/tree.json5

@@ -0,0 +1,15 @@
+{
+    tree: {
+        size: {
+            'node-height': { value: '32px' },
+
+            'padding-left': { value: '{size.m}' },
+            'toggle-padding': { value: '{size.xxs}' },
+            'icon-padding': { value: '{size.s}' },
+            'padding-right': { value: '{size.l}' }
+        },
+        font: {
+            node: { value: 'body' }
+        }
+    }
+}

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

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

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

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

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

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

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

@@ -0,0 +1,49 @@
+{
+    size: {
+        '3xs': { value: '2px' },
+        'xxs': { value: '4px' },
+        'xs': { value: '6px' },
+        's': { value: '8px' },
+        'm': { value: '12px' },
+        'l': { value: '16px' },
+        'xl': { value: '20px' },
+        'xxl': { value: '24px' },
+        '3xl': { value: '32px' },
+        '4xl': { value: '40px' },
+        '5xl': { value: '48px' },
+        '6xl': { value: '56px' },
+        '7xl': { value: '64px' },
+
+        'border-width': '1px',
+        'border-radius': '3px',
+
+        // this will be deleted
+        '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',
+        // this will be deleted
+    },
+    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/legacy-2017/tokens/properties/padding.json5

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