@ptsecurity/mosaic 13.0.0 → 13.2.0

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

@@ -0,0 +1,79 @@
+{
+    modal: {
+        'light-color-scheme': {
+            shadow: {
+                value: '(0 0 0 1px {light-color-scheme.foreground.divider.value}, 0 6px 12px 0 rgba(39, 51, 62, 0.5))'
+            },
+            'body-top-shadow':{
+                value: '0 2px 4px 0 rgba(39, 51, 62, 0.16)'
+            },
+            'body-bottom-shadow':{
+                value: '0 -2px 4px 0 rgba(39, 51, 62, 0.16)'
+            },
+            'background-mask': { value: 'rgba(39, 51, 62, 0.5)' }
+        },
+        'dark-color-scheme': {
+            shadow: {
+                value: '(0 0 0 1px {dark-color-scheme.background.background.value}, 0 6px 12px 0 rgba(0, 0, 0, 0.5))'
+            },
+            'body-top-shadow':{
+                value: '0 2px 4px 0 rgba(0, 0, 0, 0.16)'
+            },
+            'body-bottom-shadow':{
+                value: '0 -2px 4px 0 rgba(0, 0, 0, 0.16)'
+            },
+            'background-mask': { value: 'rgba(0, 0, 0, 0.5)' }
+        },
+        size: {
+            small: { value: '400px' },
+            normal: { value: '640px' },
+            large: { value: '960px' },
+
+            top: { value: '48px' },
+            'close-width': { value: '56px' },
+            'border-radius': { value: '4px' },
+            'border-width': { value: '1px' }
+        }
+    },
+    'modal-header': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.divider.value}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider.value}' }
+        },
+        size: {
+            'border-radius': { value: '4px 4px 0 0' },
+            padding: { value: '14px 16px' }
+        },
+        font: {
+            default: { value: 'title' }
+        }
+    },
+    'modal-body': {
+        size: {
+            'max-height': { value: 'calc(100vh - 260px)' },
+            padding: { value: '16px 24px 24px' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    },
+    'modal-footer': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.40.value}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider.value}' }
+        },
+        size: {
+            'border-radius': { value: '0 0 4px 4px' },
+            padding: { value: '16px {padding.headerFooter-horizontal}' }
+        }
+    },
+    'modal-confirm': {
+        size: {
+            padding: { value: '24px' }
+        }
+    }
+}

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

@@ -0,0 +1,69 @@
+{
+    navbar: {
+        'light-color-scheme': {
+            background: { value: '{light-color-scheme.second.palette.value.900.value}' },
+
+            'divider-background': { value: '{light-color-scheme.second.palette.value.560.value}' }
+        },
+        'dark-color-scheme': {
+            background: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+
+            'divider-background': { value: '{dark-color-scheme.second.palette.value.560.value}' }
+        },
+        size: {
+            'icon-margin': { value: '6px' }
+        },
+        font: {
+            title: { value: 'body' }
+        }
+    },
+    'vertical-navbar': {
+        size: {
+            states: {
+                'expanded-width': { value: '240px' },
+                'collapsed-width': { value: '56px' }
+            },
+            'icon-margin': { value: '16px' }
+        }
+    },
+    'navbar-item': {
+        'light-color-scheme': {
+            text: { value: '{light-color-scheme.second.palette.value.40.value}' },
+            icon: { value: '{light-color-scheme.second.palette.value.200.value}' },
+
+            states: {
+                active: { value: 'rgba(0, 0, 0, 0.1)' },
+                selected: { value: '{light-color-scheme.second.palette.value.700.value}' },
+                hover: { value: 'rgba(255, 255, 255, 0.1)' },
+                progress: { value: '{light-color-scheme.second.palette.value.700.value}' },
+                'disabled-opacity': { value: 0.3 }
+            }
+        },
+        'dark-color-scheme': {
+            text: { value: '{dark-color-scheme.second.palette.value.40.value}' },
+            icon: { value: '{dark-color-scheme.second.palette.value.200.value}' },
+
+            states: {
+                active: { value: 'rgba(0, 0, 0, 0.1)' },
+                selected: { value: '{dark-color-scheme.second.palette.value.600.value}' },
+                hover: { value: 'rgba(255, 255, 255, 0.1)' },
+                progress: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+                'disabled-opacity': { value: 0.3 }
+            }
+        },
+        size: {
+            padding: { value: '{padding.control-horizontal}' },
+            height: { value: '48px' },
+            height_vertical: { value: '56px' }
+        }
+    },
+    'navbar-brand': {
+        size: {
+            padding: { value: '12px' },
+            'margin-right': { value: '24px' }
+        },
+        font: {
+            title: { value: 'title' }
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+{
+    optgroup: {
+        size: {
+            'padding-left': { value: '17px' }
+        },
+        font: {
+            default: { value: 'subheading' }
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+{
+    option: {
+        size: {
+            'horizontal-padding': { value: '{padding.option-horizontal}' },
+            height: { value: '32px' },
+            'border-width': { value: '2px' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    }
+}

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

@@ -0,0 +1,68 @@
+{
+    popover: {
+        'light-color-scheme': {
+            background: { value: '{light-color-scheme.background.background.value}' },
+            text: { value: '{light-color-scheme.foreground.text.value}' },
+            shadow: { value: '{popup.light-color-scheme.shadow.value}' },
+            border: { value: '{popup.light-color-scheme.border.value}' }
+        },
+        'dark-color-scheme': {
+            background: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+            text: { value: '{dark-color-scheme.foreground.text.value}' },
+            shadow: { value: '{popup.dark-color-scheme.shadow.value}' },
+            border: { value: '{dark-color-scheme.second.palette.value.700.value}' }
+        },
+        size: {
+            'max-height': { value: '480px' },
+            padding: { value: '16px' },
+            'border-radius': { value: '3px' },
+
+        'arrow-size': { value: '12px' },
+        'trigger-margin': { value: '9px' },
+
+        'small-width': { value: '200px' },
+        'normal-width': { value: '400px' },
+        'large-width': { value: '640px' }
+    },
+    font: {
+        default: { value: 'body' }
+    }
+},
+'popover-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: '10px 16px' },
+        padding: { value: '10px 16px' }
+    },
+    font: {
+        default: { value: 'subheading' }
+    }
+},
+'popover-footer': {
+    'light-color-scheme': {
+        border: { value: '{popup.light-color-scheme.footer-background.value}' },
+        background: { value: '{popup.light-color-scheme.footer-background.value}' }
+    },
+    'dark-color-scheme': {
+        border: { value: '{dark-color-scheme.second.palette.value.600.value}' },
+        background: { value: '{dark-color-scheme.background.background-disabled.value}' }
+    },
+    size: {
+        'margin-top': { value: '8px' },
+        padding: { value: '12px {padding.headerFooter-horizontal}' },
+        'height': { value: '56px' }
+    },
+    font: {
+        default: { value: 'body' }
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+{
+    popup: {
+        'light-color-scheme': {
+            shadow: { value: '0 3px 8px 0 rgba(39, 51, 62, 0.2)' },
+            border: { value: '{light-color-scheme.foreground.divider.value}' },
+            divider: { value: '{light-color-scheme.foreground.divider.value}' },
+            background: { value: '{light-color-scheme.background.background.value}' },
+            'footer-background': { value: '{light-color-scheme.background.background-disabled.value}' }
+        },
+        'dark-color-scheme': {
+            shadow: { value: '0 3px 8px 0 rgba(0, 0, 0, 0.2)' },
+            border: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+            divider: { value: '{dark-color-scheme.second.palette.value.600.value}' },
+            background: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+            'footer-background': { value: 'transparent' }
+        }
+    }
+}

package/design-tokens/pt-2022/tokens/components/progress-bar.json5

@@ -0,0 +1,13 @@
+{
+    'progress-bar': {
+        'light-color-scheme': {
+            background: { value: '{light-color-scheme.second.palette.value.A60.value}' }
+        },
+        'dark-color-scheme': {
+            background: { value: 'rgba(white,0.06)' }
+        },
+        size: {
+            height: { value: '4px' }
+        }
+    }
+}

package/design-tokens/pt-2022/tokens/components/progress-spinner.json5

@@ -0,0 +1,7 @@
+{
+    'progress-spinner': {
+        size: {
+            size: { value: '16px' }
+        }
+    }
+}

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

@@ -0,0 +1,44 @@
+{
+    radio: {
+        'light-color-scheme': {
+            'outer-circle-border': { value: '{light-color-scheme.foreground.border.value}' },
+            'inner-circle-border': { value: 'transparent' },
+
+            states: {
+                checked: {
+                    'outer-circle-border': { value: '{light-color-scheme.primary.default.value}' },
+                    'inner-circle-border': { value: '{light-color-scheme.primary.default.value}' }
+                },
+                focused: {
+                    'outer-circle-border': { value: '{light-color-scheme.states.focused-color.value}' },
+                    'outer-circle-shadow': { value: '0 0 0 2px {light-color-scheme.states.focused-color.value}' },
+                    'inner-circle-shadow': { value: '0 0 0 1px {light-color-scheme.background.background.value}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            'outer-circle-border': { value: '{dark-color-scheme.foreground.border.value}' },
+            'inner-circle-border': { value: 'transparent' },
+
+            states: {
+                checked: {
+                    'outer-circle-border': { value: '{dark-color-scheme.primary.default.value}' },
+                    'inner-circle-border': { value: '{dark-color-scheme.primary.default.value}' }
+                },
+                focused: {
+                    'outer-circle-border': { value: '{dark-color-scheme.states.focused-color.value}' },
+                    'outer-circle-shadow': { value: '0 0 0 2px {dark-color-scheme.states.focused-color.value}' },
+
+                    'inner-circle-shadow': { value: '0 0 0 1px {dark-color-scheme.background.background.value}' }
+                }
+            }
+        },
+        size: {
+            size: { value: '14px' },
+            'label-margin': { value: '{margin.iconText_M-horizontal}' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    }
+}

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

@@ -0,0 +1,25 @@
+{
+    select: {
+        size: {
+            height: { value: '30px' },
+            'left-padding': { value: '{padding.control-horizontal}' },
+            'right-padding': { value: '8px' },
+            'left-padding-multiple': { value: '8px' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    },
+    'select-panel': {
+        size: {
+            'max-height': { value: '232px' },
+            'max-width': { value: '640px' },
+            'vertical-padding': { value: '4px' },
+            'border-width': { value: '1px' },
+            'border-radius': { value: '3px' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    }
+}

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

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

@@ -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' }
+        }
+    }
+}

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

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

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

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

@@ -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/pt-2022/tokens/components/timepicker.json5

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