@ptsecurity/mosaic 11.4.4 → 11.6.0

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

@@ -0,0 +1,143 @@
+{
+    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.value}' },
+                border: { value: '{light-color-scheme.primary.palette.value.560.value}' },
+                background: { value: '{light-color-scheme.primary.palette.value.500.value}' },
+                icon: { value: '{light-color-scheme.primary.palette.value.contrast.500.value}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({light-color-scheme.primary.palette.value.560.value}, 5)' },
+                        background: { value: 'darken({light-color-scheme.primary.palette.value.500.value}, 5)' }
+                    }
+                }
+            },
+            primary_transparent: {
+                color: { value: '{light-color-scheme.primary.palette.value.500.value}' },
+                icon: { value: '{light-color-scheme.primary.palette.value.500.value}' },
+
+                states: {
+                    hover: {
+                        color: { value: '{light-color-scheme.primary.palette.value.600.value}' },
+                        icon: { value: '{light-color-scheme.primary.palette.value.600.value}' }
+                    },
+                    active: {
+                        color: { value: '{light-color-scheme.primary.palette.value.700.value}' },
+                        icon: { value: '{light-color-scheme.primary.palette.value.700.value}' }
+                    }
+                }
+            },
+            second: {
+                border: { value: '{light-color-scheme.foreground.border.value}' },
+                background: { value: '{light-color-scheme.background.background-disabled.value}' },
+                color: { value: '{light-color-scheme.foreground.text.value}' },
+                icon: { value: '{light-color-scheme.foreground.text-less-contrast.value}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({light-color-scheme.foreground.border.value}, 5)' },
+                        background: { value: 'darken({light-color-scheme.background.background-disabled.value}, 5)' }
+                    }
+                }
+            },
+            error: {
+                border: { value: '{light-color-scheme.foreground.border.value}' },
+                background: { value: '{light-color-scheme.background.background-disabled.value}' },
+                color: { value: '{light-color-scheme.error.palette.value.400.value}' },
+                icon: { value: '{light-color-scheme.error.palette.value.400.value}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({light-color-scheme.foreground.border.value}, 5)' },
+                        background: { value: 'darken({light-color-scheme.background.background-disabled.value}, 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.value}' },
+                border: { value: '{dark-color-scheme.primary.palette.value.560.value}' },
+                background: { value: '{dark-color-scheme.primary.palette.value.500.value}' },
+                icon: { value: '{dark-color-scheme.primary.palette.value.contrast.500.value}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({dark-color-scheme.primary.palette.value.560.value}, 5)' },
+                        background: { value: 'darken({dark-color-scheme.primary.palette.value.400.value}, 5)' }
+                    }
+                }
+            },
+
+            primary_transparent: {
+                color: { value: '{dark-color-scheme.primary.palette.value.500.value}' },
+                icon: { value: '{dark-color-scheme.primary.palette.value.500.value}' },
+
+                states: {
+                    hover: {
+                        color: { value: '{dark-color-scheme.primary.palette.value.600.value}' },
+                        icon: { value: '{dark-color-scheme.primary.palette.value.600.value}' }
+                    },
+                    active: {
+                        color: { value: '{dark-color-scheme.primary.palette.value.700.value}' },
+                        icon: { value: '{dark-color-scheme.primary.palette.value.700.value}' }
+                    }
+                }
+            },
+            second: {
+                border: { value: '{dark-color-scheme.foreground.border.value}' },
+                background: { value: '{dark-color-scheme.background.background-disabled.value}' },
+                color: { value: '{dark-color-scheme.foreground.text.value}' },
+                icon: { value: '{dark-color-scheme.foreground.text-less-contrast.value}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({dark-color-scheme.foreground.border.value}, 5)' },
+                        background: { value: 'darken({dark-color-scheme.background.background-disabled.value}, 5)' }
+                    }
+                }
+            },
+            error: {
+                border: { value: '{dark-color-scheme.foreground.border.value}' },
+                background: { value: '{dark-color-scheme.background.background-disabled.value}' },
+                color: { value: '{dark-color-scheme.error.palette.value.400.value}' },
+                icon: { value: '{dark-color-scheme.error.palette.value.400.value}' },
+
+                states: {
+                    active: {
+                        border: { value: 'darken({dark-color-scheme.foreground.border.value}, 5)' },
+                        background: { value: 'darken({dark-color-scheme.background.background-disabled.value}, 5)' }
+                    }
+                }
+            }
+        },
+        size: {
+            'border-width': { value: '1px' },
+            'border-radius': { value: '3px' },
+
+            'vertical-padding': { value: '6px' },
+            'horizontal-padding': { value: '16px' }
+        },
+        font: {
+            default: { value: 'body' },
+            primary: { value: 'body-strong' },
+            primary_transparent: { value: 'body' }
+        }
+    },
+    'icon-button': {
+        size: {
+            'vertical-padding': { value: '6px' },
+            'horizontal-padding': { value: '8px' },
+
+            'icon-horizontal-padding': { value: '16px' }
+        }
+    }
+}

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

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

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

@@ -0,0 +1,39 @@
+{
+    checkbox: {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.300.value}' },
+            states: {
+                checked: {
+                    border: { value: '{light-color-scheme.primary.palette.value.600.value}' },
+                    background: { value: '{light-color-scheme.primary.palette.value.500.value}' }
+                },
+                focused: {
+                    border: { value: '{light-color-scheme.primary.palette.value.600.value}' },
+                    shadow: { value: 'inset 0 0 0 1px {light-color-scheme.background.background.value}, 0 0 0 1px {light-color-scheme.primary.palette.value.600.value}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.second.palette.value.400.value}' },
+            states: {
+                checked: {
+                    border: { value: '{dark-color-scheme.primary.palette.value.400.value}' },
+                    background: { value: '{dark-color-scheme.primary.palette.value.600.value}' }
+                },
+                focused: {
+                    border: { value: '{dark-color-scheme.primary.palette.value.400.value}' },
+                    shadow: { value: 'inset 0 0 0 1px {dark-color-scheme.background.background.value}, 0 0 0 1px {dark-color-scheme.primary.palette.value.400.value}' }
+                }
+            }
+        },
+        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/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.value}' },
+                    background: { value: '{light-color-scheme.primary.palette.value.100.value}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            states: {
+                selected: {
+                    color: { value: '{dark-color-scheme.primary.palette.value.500.value}' },
+                    background: { value: '{dark-color-scheme.primary.palette.value.700.value}' }
+                }
+            }
+        },
+        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/tokens/components/divider.json5

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

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

@@ -0,0 +1,47 @@
+{
+    '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: {
+            'icon-padding-right': { value: '8px' }
+        }
+    },
+    'dropdown-panel': {
+        size: {
+            'max-width': { value: '640px' },
+            padding: { value: '4px 0' },
+            border: {
+                width: { value: '1px' },
+                radius: { value: '3px' }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+{
+    'form-field': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.default.value}' },
+            background: { value: '{light-color-scheme.background.background.value}' },
+
+            states: {
+                hover: {
+                    border: { value: '{light-color-scheme.second.palette.value.400.value}' }
+                },
+                invalid: {
+                    border: { value: '{light-color-scheme.error.default.value}' },
+                    background: { value: 'transparent' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.second.default.value}' },
+            background: { value: '{dark-color-scheme.background.background.value}' },
+
+            states: {
+                hover: {
+                    border: { value: '{dark-color-scheme.second.palette.value.200.value}' }
+                },
+                invalid: {
+                    border: { value: '{dark-color-scheme.error.default.value}' },
+                    background: { value: 'transparent' }
+                }
+            }
+        },
+        size: {
+            border: {
+                width: { value: '1px' },
+                radius: { value: '3px' }
+            },
+            button: {
+                width: { value: '32px' }
+            }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    },
+    'form-field-hint': {
+        size: {
+            'margin-top': { value: '4px' }
+        },
+        font: {
+            default: { value: 'caption' }
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+{
+    forms: {
+        'light-color-scheme': {
+            label: { value: '{light-color-scheme.foreground.text-less-contrast.value}' },
+            legend: { value: '{light-color-scheme.foreground.text.value}' }
+        },
+        'dark-color-scheme': {
+            label: { value: '{dark-color-scheme.foreground.text-less-contrast.value}' },
+            legend: { value: '{dark-color-scheme.foreground.text.value}' }
+        },
+        size: {
+            horizontal: {
+                row: {
+                    'margin-bottom': { value: '20px' }
+                },
+                label: {
+                    'padding-top': { value: '6px' },
+                    'padding-bottom': { value: '0' }
+                },
+                control: {
+                    'padding-left': { value: '16px' }
+                },
+                legend: {
+                    'margin-top': { value: '32px' },
+                    'margin-bottom': { value: '16px' }
+                }
+            },
+            vertical: {
+                row: {
+                    'margin-bottom': { value: '16px' }
+                },
+                label: {
+                    'padding-top': { value: '0' },
+                    'padding-bottom': { value: '4px' }
+                },
+                control: {
+                    'padding-left': { value: '24px' }
+                },
+                legend: {
+                    'margin-top': { value: '32px' },
+                    'margin-bottom': { value: '12px' }
+                }
+            },
+        },
+        font: {
+            default: {
+                label: { value: 'body' },
+                legend: { value: 'subheading' },
+            },
+        }
+    }
+}

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

@@ -0,0 +1,13 @@
+{
+    input: {
+        size: {
+            padding: { value: '5px {padding.control-horizontal}' },
+            width: { value: '100%' },
+            'min-height': { value: '30px' }
+        },
+        font: {
+            default: { value: 'body' },
+            monospace: { value: 'body-mono' }
+        }
+    }
+}

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

@@ -0,0 +1,56 @@
+{
+    link: {
+        'light-color-scheme': {
+            text: { value: '{light-color-scheme.primary.default.value}' },
+            'border-bottom': { value: 'rgba({light-color-scheme.primary.default.value}, 0.32)' },
+
+            'state-visited': {
+                'text': { value: '#6A2795' },
+                'border-bottom': { value: 'rgba(106, 39, 149, 0.32)' }
+            },
+            'state-hover': {
+                'text': { value: '{light-color-scheme.primary.palette.value.600.value}' },
+                'border-bottom': { value: 'rgba({light-color-scheme.primary.palette.value.600.value}, 0.32)' }
+            },
+
+            'state-active': { value: '{light-color-scheme.primary.palette.value.700.value}' },
+
+            'state-focused': {
+                outline: { value: '{light-color-scheme.states.focused-color.value}' }
+            }
+        },
+        'dark-color-scheme': {
+            text: { value: '{dark-color-scheme.primary.default.value}' },
+            'border-bottom': { value: 'rgba({dark-color-scheme.primary.default.value}, 0.32)' },
+
+            'state-visited': {
+                'text': { value: '#a23ee2' },
+                'border-bottom': { value: 'rgba(162, 62, 226, 0.32)' }
+            },
+            'state-hover': {
+                'text': { value: '{dark-color-scheme.primary.palette.value.300.value}' },
+                'border-bottom': { value: 'rgba({dark-color-scheme.primary.palette.value.300.value}, 0.32)' }
+            },
+            'state-active': { value: '{dark-color-scheme.primary.palette.value.300.value}' },
+            'state-focused': {
+                outline: { value: '{dark-color-scheme.states.focused-color.value}' }
+            }
+        },
+        size: {
+            'icon-margin': { value: '{margin.iconText_S-horizontal}' },
+            'state-focused': {
+                'outline-offset': { value: '2px' },
+                'outline-width': { value: '2px' }
+            }
+        },
+        animation: {
+            'transition': { value: 'color ease-out 300ms' },
+            'state-hover': {
+                'transition': { value: 'color 0ms' }
+            }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+{
+    list: {
+        size: {
+            'horizontal-padding': { value: '{padding.option-horizontal}' },
+            'icon-padding': { value: '4px' },
+
+            'item-height': { value: '{size.option-height}' },
+
+            'two-line-height': { value: '72px' },
+            'three-line-height': { value: '88px' },
+            'multi-line-padding': { value: '16px' },
+
+            'icon-width': { value: '24px' }
+        },
+        font: {
+            item: { value: 'body' }
+        }
+    }
+}

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

@@ -0,0 +1,67 @@
+{
+    modal: {
+        'light-color-scheme': {
+            shadow: {
+                value: '(0 0 0 1px {light-color-scheme.second.palette.value.300.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)' }
+        },
+        'dark-color-scheme': {
+            shadow: {
+                value: '(0 0 0 1px {dark-color-scheme.second.palette.value.800.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': {
+        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': {
+        size: {
+            'border-radius': { value: '0 0 4px 4px' },
+            padding: { value: '16px {padding.headerFooter-horizontal}' }
+        }
+    },
+    'modal-confirm': {
+        size: {
+            padding: { value: '24px' }
+        }
+    }
+}