@ptsecurity/mosaic 13.3.0 → 13.3.1

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

@@ -0,0 +1,83 @@
+{
+    alert: {
+        'light-color-scheme': {
+            error: {
+                background: { value: '{light-color-scheme.error.palette.value.60}' },
+                border: { value: '{light-color-scheme.error.default}' },
+                icon: { value: '{light-color-scheme.error.default}' }
+            },
+            warning: {
+                background: { value: '{light-color-scheme.warning.palette.value.60}' },
+                border: { value: '{light-color-scheme.warning.default}' },
+                icon: { value: '{light-color-scheme.warning.palette.value.400}' }
+            },
+            success: {
+                background: { value: '{light-color-scheme.success.palette.value.60}' },
+                border: { value: '{light-color-scheme.success.default}' },
+                icon: { value: '{light-color-scheme.success.palette.value.400}' }
+            },
+            info: {
+                background: { value: '{light-color-scheme.info.palette.value.60}' },
+                border: { value: '{light-color-scheme.info.default}' },
+                icon: { value: '{light-color-scheme.info.palette.value.400}' }
+            },
+            default: {
+                background: { value: '{light-color-scheme.second.palette.value.60}' },
+                border: { value: '{light-color-scheme.second.default}' },
+                icon: { value: '{light-color-scheme.second.palette.value.200}' }
+            }
+        },
+        'dark-color-scheme': {
+            error: {
+                background: { value: '{dark-color-scheme.error.palette.value.700}' },
+                border: { value: '{dark-color-scheme.error.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.error.default}' }
+            },
+            warning: {
+                background: { value: '{dark-color-scheme.warning.palette.value.700}' },
+                border: { value: '{dark-color-scheme.warning.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.warning.default}' }
+            },
+            success: {
+                background: { value: '{dark-color-scheme.success.palette.value.700}' },
+                border: { value: '{dark-color-scheme.success.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.success.default}' }
+            },
+            info: {
+                background: { value: '{dark-color-scheme.info.palette.value.700}' },
+                border: { value: '{dark-color-scheme.info.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.info.default}' }
+            },
+            default: {
+                background: { value: '{dark-color-scheme.second.palette.value.700}' },
+                border: { value: '{dark-color-scheme.second.palette.value.700}' },
+                icon: { value: '{dark-color-scheme.second.default}' }
+            }
+        },
+        size: {
+            'border-width': { value: '1px' },
+            'border-radius': { value: '4px' },
+
+            'horizontal-padding': { value: '{padding.control-horizontal}' },
+            'vertical-padding': { value: '13px' },
+
+            'icon-margin': { value: '{margin.iconText_M-horizontal}' },
+
+            'close-button-width': { value: '16px' },
+
+            small: {
+                'vertical-padding': { value: '11px' }
+            }
+        },
+        font: {
+            default: {
+                header: { value: 'subheading' },
+                body: { value: 'body' }
+            },
+            small: {
+                header: { value: 'caption' },
+                body: { value: 'caption' }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+{
+    autocomplete: {
+        size: {
+            panel: {
+                padding: { value: '4px 0' },
+                'max-height': { value: '256px' },
+                'border-radius': { value: '3px' }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,174 @@
+{
+    badge: {
+        'light-color-scheme': {
+            solid: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.500}' },
+                    color: { value: 'white' },
+                    border: { value: '{light-color-scheme.primary.palette.value.500}' },
+                },
+                info: {
+                    border: { value: '{light-color-scheme.primary.palette.value.500}' },
+                    background: { value: '{light-color-scheme.primary.palette.value.500}' },
+                    color: { value: 'white' }
+                },
+                success: {
+                    border: { value: '{light-color-scheme.success.palette.value.500}' },
+                    background: { value: '{light-color-scheme.success.palette.value.500}' },
+                    color: { value: 'white' }
+                },
+                warning: {
+                    border: { value: '{light-color-scheme.warning.palette.value.500}' },
+                    background: { value: '{light-color-scheme.warning.palette.value.500}' },
+                    color: { value: 'white' }
+                },
+                error: {
+                    border: { value: '{light-color-scheme.error.palette.value.500}' },
+                    background: { value: '{light-color-scheme.error.palette.value.500}' },
+                    color: { value: 'white' }
+                },
+                transparent: {
+                    border: { value: '{light-color-scheme.second.palette.value.200}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.contrast.300}' },
+                    background: { value: 'transparent' }
+                },
+                light: {
+                    border: { value: '{light-color-scheme.second.palette.value.100}' },
+                    background: { value: '{light-color-scheme.second.palette.value.100}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.contrast.300}' }
+                },
+                second: {
+                    border: { value: '{light-color-scheme.second.palette.value.600}' },
+                    background: { value: '{light-color-scheme.second.palette.value.600}' },
+                    color: { value: 'white' }
+                }
+            },
+            pastel: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.40}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.200}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.500}' }
+                },
+                info: {
+                    background: { value: '{light-color-scheme.info.palette.value.40}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.200}' },
+                    color: { value: '{light-color-scheme.info.palette.value.500}' }
+                },
+                success: {
+                    background: { value: '{light-color-scheme.success.palette.value.40}' },
+                    border: { value: '{light-color-scheme.success.palette.value.200}' },
+                    color: { value: '{light-color-scheme.success.palette.value.560}' }
+                },
+                warning: {
+                    background: { value: '{light-color-scheme.warning.palette.value.40}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.200}' },
+                    color: { value: '{light-color-scheme.warning.palette.value.560}' }
+                },
+                error: {
+                    background: { value: '{light-color-scheme.error.palette.value.40}' },
+                    border: { value: '{light-color-scheme.error.palette.value.200}' },
+                    color: { value: '{light-color-scheme.error.palette.value.500}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            pastel: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.A100}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.100}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.700}' },
+                },
+                info: {
+                    background: { value: '{light-color-scheme.primary.palette.value.100}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.100}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.A100}' }
+                },
+                success: {
+                    border: { value: '{light-color-scheme.success.palette.value.700}' },
+                    background: { value: '{light-color-scheme.success.palette.value.A100}' },
+                    color: { value: '{light-color-scheme.success.palette.value.100}' }
+                },
+                warning: {
+                    border: { value: '{light-color-scheme.warning.palette.value.700}' },
+                    background: { value: '{light-color-scheme.warning.palette.value.A100}' },
+                    color: { value: '{light-color-scheme.warning.palette.value.100}' }
+                },
+                error: {
+                    border: { value: '{light-color-scheme.error.palette.value.700}' },
+                    background: { value: '{light-color-scheme.error.palette.value.A100}' },
+                    color: { value: '{light-color-scheme.error.palette.value.100}' }
+                }
+            },
+            solid: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.700}' },
+                    color: { value: 'white' },
+                    border: { value: '{light-color-scheme.primary.palette.value.700}' },
+                },
+                info: {
+                    border: { value: '{light-color-scheme.primary.palette.value.800}' },
+                    background: { value: '{light-color-scheme.primary.palette.value.800}' },
+                    color: { value: 'white' }
+                },
+                success: {
+                    border: { value: '{light-color-scheme.success.palette.value.700}' },
+                    background: { value: '{light-color-scheme.success.palette.value.700}' },
+                    color: { value: 'white' }
+                },
+                warning: {
+                    border: { value: '{light-color-scheme.warning.palette.value.700}' },
+                    background: { value: '{light-color-scheme.warning.palette.value.700}' },
+                    color: { value: 'white' }
+                },
+                error: {
+                    border: { value: '{light-color-scheme.error.palette.value.700}' },
+                    background: { value: '{light-color-scheme.error.palette.value.700}' },
+                    color: { value: 'white' }
+                },
+                transparent: {
+                    border: { value: '{light-color-scheme.second.palette.value.500}' },
+                    color: { value: '{light-color-scheme.second.palette.value.40}' },
+                    background: { value: 'transparent' }
+                },
+                light: {
+                    border: { value: '{light-color-scheme.second.palette.value.400}' },
+                    background: { value: '{light-color-scheme.second.palette.value.400}' },
+                    color: { value: 'white' }
+                },
+                second: {
+                    border: { value: '{light-color-scheme.second.palette.value.700}' },
+                    background: { value: '{light-color-scheme.second.palette.value.700}' },
+                    color: { value: 'white' }
+                }
+            }
+        },
+        size: {
+            default: {
+                height: { value: '{size.xxl}' },
+                'min-width': { value: '10px' },
+                padding: { value: '0 8px' },
+                'border-width': { value: '1px' },
+                'border-radius': { value: '4px' }
+            },
+            mini: {
+                height: { value: '{size.l}' },
+                'min-width': { value: '10px' },
+                'border-width': { value: '1px' },
+                'border-radius': { value: '2px' },
+                padding: { value: '0 4px' }
+            }
+        },
+        font: {
+            default: {
+                default: { value: 'caption' },
+                caps: { value: 'caption-caps' },
+                mono: { value: 'caption-mono'}
+            },
+            mini: {
+                default: { value: 'extra-small-text' },
+                caps: { value: 'extra-small-text-caps' },
+                mono: { value: 'extra-small-text-mono'}
+            }
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+{
+    'button-toggle': {
+        size: {
+            border: {
+                size: { value: '1px' },
+                radius: { value: '3px' }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,142 @@
+{
+    button: {
+        'light-color-scheme': {
+            active: {
+                shadow: { value: 'inset 0 1px 2px 0 rgba(black, 0.2)' }
+            },
+            primary: {
+                color: { value: '{light-color-scheme.primary.palette.value.contrast.500}' },
+                border: { value: '{light-color-scheme.primary.palette.value.560}' },
+                background: { value: '{light-color-scheme.primary.palette.value.500}' },
+                icon: { value: '{light-color-scheme.primary.palette.value.contrast.500}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({light-color-scheme.primary.palette.value.560}, 5)' },
+                        background: { value: 'darken({light-color-scheme.primary.palette.value.500}, 5)' }
+                    }
+                }
+            },
+            primary_transparent: {
+                color: { value: '{light-color-scheme.primary.palette.value.500}' },
+                icon: { value: '{light-color-scheme.primary.palette.value.500}' },
+
+                states: {
+                    hover: {
+                        color: { value: '{light-color-scheme.primary.palette.value.600}' },
+                        icon: { value: '{light-color-scheme.primary.palette.value.600}' }
+                    },
+                    active: {
+                        color: { value: '{light-color-scheme.primary.palette.value.700}' },
+                        icon: { value: '{light-color-scheme.primary.palette.value.700}' }
+                    }
+                }
+            },
+            second: {
+                border: { value: '{light-color-scheme.foreground.border}' },
+                background: { value: '{light-color-scheme.background.background-disabled}' },
+                color: { value: '{light-color-scheme.foreground.text}' },
+                icon: { value: '{light-color-scheme.foreground.text-less-contrast}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({light-color-scheme.foreground.border}, 5)' },
+                        background: { value: 'darken({light-color-scheme.background.background-disabled}, 5)' }
+                    }
+                }
+            },
+            error: {
+                border: { value: '{light-color-scheme.foreground.border}' },
+                background: { value: '{light-color-scheme.background.background-disabled}' },
+                color: { value: '{light-color-scheme.error.palette.value.400}' },
+                icon: { value: '{light-color-scheme.error.palette.value.400}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({light-color-scheme.foreground.border}, 5)' },
+                        background: { value: 'darken({light-color-scheme.background.background-disabled}, 5)' }
+                    }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            active: {
+                shadow: { value: 'inset 1px 2px 2px 0 rgba(black, 0.2)' }
+            },
+            primary: {
+                color: { value: '{dark-color-scheme.primary.palette.value.contrast.500}' },
+                border: { value: '{dark-color-scheme.primary.palette.value.560}' },
+                background: { value: '{dark-color-scheme.primary.palette.value.500}' },
+                icon: { value: '{dark-color-scheme.primary.palette.value.contrast.500}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({dark-color-scheme.primary.palette.value.560}, 5)' },
+                        background: { value: 'darken({dark-color-scheme.primary.palette.value.400}, 5)' }
+                    }
+                }
+            },
+
+            primary_transparent: {
+                color: { value: '{dark-color-scheme.primary.palette.value.500}' },
+                icon: { value: '{dark-color-scheme.primary.palette.value.500}' },
+
+                states: {
+                    hover: {
+                        color: { value: '{dark-color-scheme.primary.palette.value.600}' },
+                        icon: { value: '{dark-color-scheme.primary.palette.value.600}' }
+                    },
+                    active: {
+                        color: { value: '{dark-color-scheme.primary.palette.value.700}' },
+                        icon: { value: '{dark-color-scheme.primary.palette.value.700}' }
+                    }
+                }
+            },
+            second: {
+                border: { value: '{dark-color-scheme.foreground.border}' },
+                background: { value: '{dark-color-scheme.background.background-disabled}' },
+                color: { value: '{dark-color-scheme.foreground.text}' },
+                icon: { value: '{dark-color-scheme.foreground.text-less-contrast}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({dark-color-scheme.foreground.border}, 5)' },
+                        background: { value: 'darken({dark-color-scheme.background.background-disabled}, 5)' }
+                    }
+                }
+            },
+            error: {
+                border: { value: '{dark-color-scheme.foreground.border}' },
+                background: { value: '{dark-color-scheme.background.background-disabled}' },
+                color: { value: '{dark-color-scheme.error.palette.value.400}' },
+                icon: { value: '{dark-color-scheme.error.palette.value.400}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({dark-color-scheme.foreground.border}, 5)' },
+                        background: { value: 'darken({dark-color-scheme.background.background-disabled}, 5)' }
+                    }
+                }
+            }
+        },
+        size: {
+            height: { value: '{size.3xl}' },
+
+            'border-width': { value: '1px' },
+            'border-radius': { value: '3px' },
+
+            'horizontal-padding': { value: '{size.m}' }
+        },
+        font: {
+            default: { value: 'body' },
+            primary: { value: 'body-strong' },
+            primary_transparent: { value: 'body' }
+        }
+    },
+    'icon-button': {
+        size: {
+            'horizontal-padding': { value: '{size.s}' },
+            'left-icon-padding': { value: '{size.xs}' }
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+{
+    card: {
+        'light-color-scheme': {
+            error: {
+                'vertical-line': { value: '{light-color-scheme.error.default}' },
+                background: { value: '{light-color-scheme.error.palette.value.60}' },
+                shadow: { value: '{light-color-scheme.second.palette.value.100}' }
+            },
+            warning: {
+                'vertical-line': { value: '{light-color-scheme.warning.default}' },
+                background: { value: '{light-color-scheme.warning.palette.value.60}' },
+                shadow: { value: '{light-color-scheme.second.palette.value.100}' }
+            },
+            success: {
+                'vertical-line': { value: '{light-color-scheme.success.default}' },
+                background: { value: '{light-color-scheme.success.palette.value.60}' },
+                shadow: { value: '{light-color-scheme.second.palette.value.100}' }
+            },
+            info: {
+                'vertical-line': { value: '{light-color-scheme.info.default}' },
+                background: { value: '{light-color-scheme.info.palette.value.60}' },
+                shadow: { value: '{light-color-scheme.second.palette.value.100}' }
+            }
+        },
+        'dark-color-scheme': {
+            error: {
+                'vertical-line': { value: '{dark-color-scheme.error.default}' },
+                background: { value: '{dark-color-scheme.error.palette.value.700}' },
+                shadow: { value: '{dark-color-scheme.second.palette.value.700}' }
+            },
+            warning: {
+                'vertical-line': { value: '{dark-color-scheme.warning.default}' },
+                background: { value: '{dark-color-scheme.warning.palette.value.700}' },
+                shadow: { value: '{dark-color-scheme.second.palette.value.700}' }
+            },
+            success: {
+                'vertical-line': { value: '{dark-color-scheme.success.default}' },
+                background: { value: '{dark-color-scheme.success.palette.value.700}' },
+                shadow: { value: '{dark-color-scheme.second.palette.value.700}' }
+            },
+            info: {
+                'vertical-line': { value: '{dark-color-scheme.info.default}' },
+                background: { value: '{dark-color-scheme.info.palette.value.700}' },
+                shadow: { value: '{dark-color-scheme.second.palette.value.700}' }
+            }
+        },
+        size: {
+            'vertical-line': { value: '4px' }
+        }
+    }
+}

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

@@ -0,0 +1,39 @@
+{
+    checkbox: {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.300}' },
+            states: {
+                checked: {
+                    border: { value: '{light-color-scheme.primary.palette.value.600}' },
+                    background: { value: '{light-color-scheme.primary.palette.value.500}' }
+                },
+                focused: {
+                    border: { value: '{light-color-scheme.primary.palette.value.600}' },
+                    shadow: { value: '0 0 0 1px {light-color-scheme.primary.palette.value.600}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.second.palette.value.400}' },
+            states: {
+                checked: {
+                    border: { value: '{dark-color-scheme.primary.palette.value.400}' },
+                    background: { value: '{dark-color-scheme.primary.palette.value.600}' }
+                },
+                focused: {
+                    border: { value: '{dark-color-scheme.primary.palette.value.400}' },
+                    shadow: { value: '0 0 0 1px {dark-color-scheme.primary.palette.value.400}' }
+                }
+            }
+        },
+        size: {
+            width: { value: '16px' },
+            'label-margin': { value: '{margin.iconText_M-horizontal}' },
+            'border-width': { value: '1px' },
+            'toggle-box-shadow': { value: 'inset 0 0 1px 0 rgba(0, 0, 0, 0.2)' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    }
+}

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

@@ -0,0 +1,64 @@
+{
+    'datepicker-toggle': {
+        size: {
+            width: { value: '30px' },
+            height: { value: '30px' }
+        }
+    },
+    'datepicker-body': {
+        'light-color-scheme': {
+            states: {
+                selected: {
+                    color: { value: '{light-color-scheme.primary.default}' },
+                    background: { value: '{light-color-scheme.primary.palette.value.100}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            states: {
+                selected: {
+                    color: { value: '{dark-color-scheme.primary.palette.value.500}' },
+                    background: { value: '{dark-color-scheme.primary.palette.value.700}' }
+                }
+            }
+        },
+        size: {
+            label: {
+                'paddings': { value: '8px 28px 12px 12px' }
+            },
+            cell: {
+                'min-size': { value: '32px' },
+                margin: { value: '5%' },
+                padding: { value: '8px' },
+                'border-width': { value: '1px' }
+            }
+        },
+        font: {
+            label: { value: 'body-strong' },
+            today: { value: 'body-strong' }
+        }
+    },
+    'datepicker-calendar': {
+        size: {
+            'padding-top': { value: '16px' },
+            'padding-horizontal': { value: '8px' },
+            'padding-bottom': { value: '8px' },
+            'padding-blocks': { value: '12px' },
+
+            'divider-width': { value: '1px' },
+
+            icon: {
+                'border-width': { value: '2px' },
+                'prev-icon-transform': { value: 'translateX(2px) rotate(-45deg)' },
+                'nex-icon-transform': { value: 'translateX(-2px) rotate(45deg)' }
+            }
+        },
+        font: {
+            default: { value: 'body' },
+            header: { value: 'caption' }
+        }
+    },
+    'datepicker-input': {
+        size: { 'width': { value: '130px' } }
+    }
+}

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

@@ -0,0 +1,8 @@
+{
+    divider: {
+        size: {
+            width: { value: '1px' },
+            'inset-margin': { value: '80px' }
+        }
+    }
+}

package/design-tokens/legacy-2017/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' }
+            },
+        }
+    }
+}