@ptsecurity/mosaic 13.3.0 → 13.5.0

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

@@ -0,0 +1,38 @@
+{
+    'description-list': {
+        'light-color-scheme': {
+            dt: { value: '{light-color-scheme.foreground.text-less-contrast}' },
+            dd: { value: '{light-color-scheme.foreground.text}' }
+        },
+        'dark-color-scheme': {
+            dt: { value: '{dark-color-scheme.foreground.text-less-contrast}' },
+            dd: { value: '{dark-color-scheme.foreground.text}' }
+        },
+        size: {
+            'grid-template-columns': { value: 'repeat(4, 1fr)' },
+
+            'dt-grid-column': { value: '1' },
+            'dd-grid-column': { value: '2 / span 3' },
+
+            horizontal: {
+                'column-gap': { value: '{size.l}' },
+                'row-gap': { value: '{size.m}' }
+            },
+            vertical: {
+                'column-gap': { value: '0' },
+                'row-gap': { value: '{size.3xs}' },
+                'dd-margin-bottom': { value: '{size.l}' }
+            },
+        },
+        font: {
+            horizontal: {
+                dt: { value: 'body' },
+                dd: { value: 'body' },
+            },
+            vertical: {
+                dt: { value: 'caption' },
+                dd: { value: 'body' }
+            },
+        }
+    }
+}

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

@@ -0,0 +1,48 @@
+{
+    'dropdown-item': {
+        size: {
+            padding: { value: '5px 15px' },
+            'icon-padding': { value: '0 8px 2px 0' }
+        },
+        font: {
+            default: { value: 'body' },
+            caption: { value: 'caption' }
+        }
+    },
+    'dropdown-group-header': {
+        size: {
+            default: {
+                padding: { value: '6px 15px' }
+            },
+            small: {
+                padding: { value: '8px 15px' }
+            }
+        },
+        font: {
+            default: { value: 'body-strong' },
+            small: { value: 'caption-caps' }
+        }
+    },
+    'dropdown-divider': {
+        size: {
+            'height': { value: '1px' },
+            'margin': { value: '4px 0' }
+        }
+    },
+    'dropdown-trigger': {
+        size: {
+            'button-right-padding': { value: '{size.s}' },
+            'right-icon-padding': { value: '{size.3xs}' }
+        }
+    },
+    'dropdown-panel': {
+        size: {
+            'max-width': { value: '640px' },
+            padding: { value: '{size.xxs} 0' },
+            border: {
+                width: { value: '{size.border-width}' },
+                radius: { value: '{size.border-radius}' }
+            }
+        }
+    }
+}

package/design-tokens/pt-2022/tokens/components/form-field.json5

@@ -0,0 +1,92 @@
+{
+    'form-field': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.border}' },
+            background: { value: '{light-color-scheme.background.background}' },
+
+            states: {
+                hover: {
+                    border: { value: '{light-color-scheme.second.palette.value.200}' }
+                },
+                invalid: {
+                    border: { value: '{light-color-scheme.states.focused-color-error}' },
+                    background: { value: 'transparent' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.border}' },
+            background: { value: 'transparent' },
+
+            states: {
+                hover: {
+                    border: { value: '{dark-color-scheme.second.palette.value.560}' }
+                },
+                invalid: {
+                    border: { value: '{dark-color-scheme.states.focused-color-error}' },
+                    background: { value: 'transparent' }
+                }
+            }
+        },
+        size: {
+            height: { value: '{size.3xl}' },
+            border: {
+                width: { value: '{size.border-width}' },
+                radius: { value: '{size.border-radius}' }
+            },
+            button: {
+                width: { value: '{size.3xl}' }
+            }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    },
+    'form-field-hint': {
+        size: {
+            'margin-top': { value: '{size.xxs}' }
+        },
+        font: {
+            default: { value: 'caption' }
+        }
+    },
+    'form-field-password-hint': {
+        'light-color-scheme': {
+            'text-color': { value: '{light-color-scheme.foreground.text}' },
+            'icon-color': { value: '{light-color-scheme.foreground.text}' },
+
+            states: {
+                invalid: {
+                    'icon-color': { value: '{light-color-scheme.foreground.text-error}' },
+                    'text-color': { value: '{light-color-scheme.foreground.text}' }
+                },
+                valid: {
+                    'text-color': { value: '{light-color-scheme.foreground.text-success}' },
+                    'icon-color': { value: '{light-color-scheme.foreground.text-success}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            'text-color': { value: '{dark-color-scheme.foreground.text}' },
+            'icon-color': { value: '{dark-color-scheme.foreground.text}' },
+
+            states: {
+                invalid: {
+                    'icon-color': { value: '{dark-color-scheme.foreground.text-error}' },
+                    'text-color': { value: '{dark-color-scheme.foreground.text}' }
+                },
+                valid: {
+                    'text-color': { value: '{dark-color-scheme.foreground.text-success}' },
+                    'icon-color': { value: '{dark-color-scheme.foreground.text-success}' }
+                }
+            }
+        },
+        size: {
+            'margin-top': { value: '{size.s}' },
+            'icon-margin': { value: '{size.xxs}' }
+        },
+        font: {
+            default: { value: 'caption' }
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+{
+    forms: {
+        'light-color-scheme': {
+            label: { value: '{light-color-scheme.foreground.text-less-contrast}' },
+            legend: { value: '{light-color-scheme.foreground.text}' }
+        },
+        'dark-color-scheme': {
+            label: { value: '{dark-color-scheme.foreground.text-less-contrast}' },
+            legend: { value: '{dark-color-scheme.foreground.text}' }
+        },
+        size: {
+            horizontal: {
+                row: {
+                    'margin-bottom': { value: '{size.xl}' }
+                },
+                label: {
+                    'padding-top': { value: '{size.xs}' },
+                    'padding-bottom': { value: '0' }
+                },
+                control: {
+                    'padding-left': { value: '{size.l}' }
+                },
+                legend: {
+                    'margin-top': { value: '{size.3xl}' },
+                    'margin-bottom': { value: '{size.l}' }
+                }
+            },
+            vertical: {
+                row: {
+                    'margin-bottom': { value: '{size.l}' }
+                },
+                label: {
+                    'padding-top': { value: '0' },
+                    'padding-bottom': { value: '{size.xxs}' }
+                },
+                control: {
+                    'padding-left': { value: '{size.xxl}' }
+                },
+                legend: {
+                    'margin-top': { value: '{size.3xl}' },
+                    'margin-bottom': { value: '{size.m}' }
+                }
+            },
+        },
+        font: {
+            default: {
+                label: { value: 'body' },
+                legend: { value: 'subheading' },
+            },
+        }
+    }
+}

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

@@ -0,0 +1,104 @@
+{
+    icon: {
+        'light-color-scheme': {
+            secondary: {
+                default: { value: '{light-color-scheme.second.palette.value.300}' },
+                states: {
+                    hover: { value: '{light-color-scheme.second.palette.value.500}' },
+                    active: { value: '{light-color-scheme.second.palette.value.600}' },
+                    disabled: { value: 'mix({icon.light-color-scheme.secondary.default}, transparent, 30%)' }
+                }
+            },
+            primary: {
+                default: { value: '{light-color-scheme.primary.palette.value.300}' },
+                states: {
+                    hover: { value: '{light-color-scheme.primary.palette.value.500}' },
+                    active: { value: '{light-color-scheme.primary.palette.value.600}' },
+                    disabled: { value: 'mix({icon.light-color-scheme.primary.default}, transparent, 30%)' }
+                }
+            },
+            info: {
+                default: { value: '{light-color-scheme.info.palette.value.300}' },
+                states: {
+                    hover: { value: '{light-color-scheme.info.palette.value.500}' },
+                    active: { value: '{light-color-scheme.info.palette.value.600}' },
+                    disabled: { value: 'mix({icon.light-color-scheme.info.default}, transparent, 30%)' }
+                }
+            },
+            success: {
+                default: { value: '{light-color-scheme.success.palette.value.300}' },
+                states: {
+                    hover: { value: '{light-color-scheme.success.palette.value.500}' },
+                    active: { value: '{light-color-scheme.success.palette.value.600}' },
+                    disabled: { value: 'mix({icon.light-color-scheme.success.default}, transparent, 30%)' }
+                }
+            },
+            warning: {
+                default: { value: '{light-color-scheme.warning.palette.value.300}' },
+                states: {
+                    hover: { value: '{light-color-scheme.warning.palette.value.500}' },
+                    active: { value: '{light-color-scheme.warning.palette.value.600}' },
+                    disabled: { value: 'mix({icon.light-color-scheme.warning.default}, transparent, 30%)' }
+                }
+            },
+            error: {
+                default: { value: '{light-color-scheme.error.palette.value.300}' },
+                states: {
+                    hover: { value: '{light-color-scheme.error.palette.value.500}' },
+                    active: { value: '{light-color-scheme.error.palette.value.600}' },
+                    disabled: { value: 'mix({icon.light-color-scheme.error.default}, transparent, 30%)' }
+                }
+            },
+        },
+        'dark-color-scheme': {
+            secondary: {
+                default: { value: '{dark-color-scheme.second.palette.value.300}' },
+                states: {
+                    hover: { value: '{dark-color-scheme.second.palette.value.500}' },
+                    active: { value: '{dark-color-scheme.second.palette.value.200}' },
+                    disabled: { value: 'mix({icon.dark-color-scheme.secondary.default}, transparent, 30%)' }
+                }
+            },
+            primary: {
+                default: { value: '{dark-color-scheme.primary.palette.value.300}' },
+                states: {
+                    hover: { value: '{dark-color-scheme.primary.palette.value.500}' },
+                    active: { value: '{dark-color-scheme.primary.palette.value.200}' },
+                    disabled: { value: 'mix({icon.dark-color-scheme.primary.default}, transparent, 30%)' }
+                }
+            },
+            info: {
+                default: { value: '{dark-color-scheme.info.palette.value.300}' },
+                states: {
+                    hover: { value: '{dark-color-scheme.info.palette.value.500}' },
+                    active: { value: '{dark-color-scheme.info.palette.value.200}' },
+                    disabled: { value: 'mix({icon.dark-color-scheme.info.default}, transparent, 30%)' }
+                }
+            },
+            success: {
+                default: { value: '{dark-color-scheme.success.palette.value.300}' },
+                states: {
+                    hover: { value: '{dark-color-scheme.success.palette.value.500}' },
+                    active: { value: '{dark-color-scheme.success.palette.value.200}' },
+                    disabled: { value: 'mix({icon.dark-color-scheme.success.default}, transparent, 30%)' }
+                }
+            },
+            warning: {
+                default: { value: '{dark-color-scheme.warning.palette.value.300}' },
+                states: {
+                    hover: { value: '{dark-color-scheme.warning.palette.value.500}' },
+                    active: { value: '{dark-color-scheme.warning.palette.value.200}' },
+                    disabled: { value: 'mix({icon.dark-color-scheme.warning.default}, transparent, 30%)' }
+                }
+            },
+            error: {
+                default: { value: '{dark-color-scheme.error.palette.value.300}' },
+                states: {
+                    hover: { value: '{dark-color-scheme.error.palette.value.500}' },
+                    active: { value: '{dark-color-scheme.error.palette.value.200}' },
+                    disabled: { value: 'mix({icon.dark-color-scheme.error.default}, transparent, 30%)' }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,12 @@
+{
+    input: {
+        size: {
+            padding: { value: '0 {size.m}' },
+            width: { value: '100%' }
+        },
+        font: {
+            default: { value: 'body' },
+            monospace: { value: 'body-mono' }
+        }
+    }
+}

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

@@ -0,0 +1,50 @@
+{
+    link: {
+        'light-color-scheme': {
+            text: { value: '{light-color-scheme.primary.palette.value.500}' },
+            'border-bottom': { value: 'rgba({link.light-color-scheme.text}, 0.32)' },
+
+            'state-visited': {
+                'text': { value: '{palette.purple.560}' },
+                'border-bottom': { value: 'rgba({link.light-color-scheme.state-visited.text}, 0.32)' }
+            },
+            'state-hover': {
+                'text': { value: '{light-color-scheme.primary.palette.value.560}' },
+                'border-bottom': { value: 'rgba({link.light-color-scheme.state-hover.text}, 0.32)' }
+            },
+
+            'state-active': { value: '{light-color-scheme.primary.palette.value.600}' },
+
+            'state-focused': {
+                outline: { value: '{light-color-scheme.states.focused-color}' }
+            }
+        },
+        'dark-color-scheme': {
+            text: { value: '{dark-color-scheme.primary.palette.value.400}' },
+            'border-bottom': { value: 'rgba({link.dark-color-scheme.text}, 0.32)' },
+
+            'state-visited': {
+                'text': { value: '{palette.purple.400}' },
+                'border-bottom': { value: 'rgba({link.dark-color-scheme.state-visited.text}, 0.32)' }
+            },
+            'state-hover': {
+                'text': { value: '{dark-color-scheme.primary.palette.value.500}' },
+                'border-bottom': { value: 'rgba({link.dark-color-scheme.state-hover.text}, 0.32)' }
+            },
+            'state-active': { value: '{dark-color-scheme.primary.palette.value.560}' },
+            'state-focused': {
+                outline: { value: '{dark-color-scheme.states.focused-color}' }
+            }
+        },
+        size: {
+            'icon-margin': { value: '{size.xxs}' },
+            'state-focused': {
+                'outline-offset': { value: '2px' },
+                'outline-width': { value: '2px' }
+            }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+{
+    list: {
+        size: {
+            'horizontal-padding': { value: '{size.m}' },
+            'icon-right-margin': { value: '{size.s}' },
+
+            'item-height': { value: '{size.option-height}' },
+        },
+        font: {
+            item: { value: 'body' }
+        }
+    }
+}

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

@@ -0,0 +1,81 @@
+{
+    modal: {
+        'light-color-scheme': {
+            shadow: {
+                value: '(0 0 0 1px {light-color-scheme.foreground.divider}, 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}, 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: '{modal-header.size.height}' },
+            'border-radius': { value: '{size.border-radius}' },
+            'border-width': { value: '{size.border-width}' }
+        }
+    },
+    'modal-header': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.divider}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider}' }
+        },
+        size: {
+            'border-radius': { value: '{size.border-radius} {size.border-radius} 0 0' },
+            height: { value: '{size.6xl}' },
+            padding: { value: '0 {size.l}' }
+        },
+        font: {
+            default: { value: 'title' }
+        }
+    },
+    'modal-body': {
+        size: {
+            'max-height': { value: 'calc(100vh - 260px)' },
+            padding: { value: '{size.l} {size.xxl} {size.xxl}' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    },
+    'modal-footer': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.40}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider}' }
+        },
+        size: {
+            'border-radius': { value: '0 0 {size.border-radius} {size.border-radius}' },
+            height: { value: '{size.7xl}' },
+            padding: { value: '0 {size.l}' }
+        }
+    },
+    'modal-confirm': {
+        size: {
+            padding: { value: '{size.xxl}' }
+        }
+    }
+}

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

@@ -0,0 +1,70 @@
+{
+    navbar: {
+        'light-color-scheme': {
+            background: { value: '{light-color-scheme.second.palette.value.900}' },
+
+            'divider-background': { value: '{light-color-scheme.second.palette.value.560}' }
+        },
+        'dark-color-scheme': {
+            background: { value: '{dark-color-scheme.second.palette.value.700}' },
+
+            'divider-background': { value: '{dark-color-scheme.second.palette.value.560}' }
+        },
+        size: {
+            'icon-margin': { value: '{size.xs}' },
+            'right-icon-margin': { value: '{size.3xs}' }
+        },
+        font: {
+            title: { value: 'body' }
+        }
+    },
+    'vertical-navbar': {
+        size: {
+            states: {
+                'expanded-width': { value: '240px' },
+                'collapsed-width': { value: '{size.6xl}' }
+            },
+            'icon-margin': { value: '{size.l}' }
+        }
+    },
+    'navbar-item': {
+        'light-color-scheme': {
+            text: { value: '{light-color-scheme.second.palette.value.40}' },
+            icon: { value: '{light-color-scheme.second.palette.value.200}' },
+
+            states: {
+                active: { value: 'rgba(0, 0, 0, 0.1)' },
+                selected: { value: '{light-color-scheme.second.palette.value.700}' },
+                hover: { value: 'rgba(255, 255, 255, 0.1)' },
+                progress: { value: '{light-color-scheme.second.palette.value.700}' },
+                'disabled-opacity': { value: 0.3 }
+            }
+        },
+        'dark-color-scheme': {
+            text: { value: '{dark-color-scheme.second.palette.value.40}' },
+            icon: { value: '{dark-color-scheme.second.palette.value.200}' },
+
+            states: {
+                active: { value: 'rgba(0, 0, 0, 0.1)' },
+                selected: { value: '{dark-color-scheme.second.palette.value.600}' },
+                hover: { value: 'rgba(255, 255, 255, 0.1)' },
+                progress: { value: '{dark-color-scheme.second.palette.value.700}' },
+                'disabled-opacity': { value: 0.3 }
+            }
+        },
+        size: {
+            padding: { value: '{size.l}' },
+            height: { value: '{size.5xl}' },
+            height_vertical: { value: '{size.6xl}' }
+        }
+    },
+    'navbar-brand': {
+        size: {
+            padding: { value: '{size.m}' },
+            'margin-right': { value: '{size.xxl}' }
+        },
+        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: '{size.m}' },
+            height: { value: '{size.3xl}' },
+            '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}' },
+            text: { value: '{light-color-scheme.foreground.text}' },
+            shadow: { value: '{popup.light-color-scheme.shadow}' },
+            border: { value: '{popup.light-color-scheme.border}' }
+        },
+        'dark-color-scheme': {
+            background: { value: '{dark-color-scheme.second.palette.value.700}' },
+            text: { value: '{dark-color-scheme.foreground.text}' },
+            shadow: { value: '{popup.dark-color-scheme.shadow}' },
+            border: { value: '{dark-color-scheme.second.palette.value.700}' }
+        },
+        size: {
+            'max-height': { value: '480px' },
+            padding: { value: '{size.l}' },
+            'border-radius': { value: '{size.border-radius}' },
+
+        '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}' },
+        text: { value: '{light-color-scheme.foreground.text}' },
+        background: { value: '{popup.light-color-scheme.background}' }
+    },
+    'dark-color-scheme': {
+        border: { value: '{dark-color-scheme.second.palette.value.600}' },
+        text: { value: '{dark-color-scheme.foreground.text}' },
+        background: { value: '{dark-color-scheme.second.palette.value.700}' }
+    },
+    size: {
+        height: { value: '{size.4xl}' },
+        padding: { value: '0 {size.l}' }
+    },
+    font: {
+        default: { value: 'subheading' }
+    }
+},
+'popover-footer': {
+    'light-color-scheme': {
+        border: { value: '{popup.light-color-scheme.footer-background}' },
+        background: { value: '{popup.light-color-scheme.footer-background}' }
+    },
+    'dark-color-scheme': {
+        border: { value: '{dark-color-scheme.second.palette.value.600}' },
+        background: { value: '{dark-color-scheme.background.background-disabled}' }
+    },
+    size: {
+        'margin-top': { value: '{size.s}' },
+        padding: { value: '{size.m} {size.l}' },
+        'height': { value: '{size.6xl}' }
+    },
+    font: {
+        default: { value: 'body' }
+    }
+  }
+}