@ptsecurity/mosaic 13.3.1 → 13.4.0

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

@@ -38,10 +38,10 @@
     'dropdown-panel': {
         size: {
             'max-width': { value: '640px' },
-            padding: { value: '4px 0' },
+            padding: { value: '{size.xxs} 0' },
             border: {
-                width: { value: '1px' },
-                radius: { value: '3px' }
+                width: { value: '{size.border-width}' },
+                radius: { value: '{size.border-radius}' }
             }
         }
     }

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

@@ -31,11 +31,11 @@
         size: {
             height: { value: '{size.3xl}' },
             border: {
-                width: { value: '1px' },
-                radius: { value: '3px' }
+                width: { value: '{size.border-width}' },
+                radius: { value: '{size.border-radius}' }
             },
             button: {
-                width: { value: '32px' }
+                width: { value: '{size.3xl}' }
             }
         },
         font: {
@@ -44,7 +44,7 @@
     },
     'form-field-hint': {
         size: {
-            'margin-top': { value: '4px' }
+            'margin-top': { value: '{size.xxs}' }
         },
         font: {
             default: { value: 'caption' }
@@ -82,8 +82,8 @@
             }
         },
         size: {
-            'margin-top': { value: '8px' },
-            'icon-margin': { value: '4px' }
+            'margin-top': { value: '{size.s}' },
+            'icon-margin': { value: '{size.xxs}' }
         },
         font: {
             default: { value: 'caption' }

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

@@ -11,34 +11,34 @@
         size: {
             horizontal: {
                 row: {
-                    'margin-bottom': { value: '20px' }
+                    'margin-bottom': { value: '{size.xl}' }
                 },
                 label: {
-                    'padding-top': { value: '6px' },
+                    'padding-top': { value: '{size.xs}' },
                     'padding-bottom': { value: '0' }
                 },
                 control: {
-                    'padding-left': { value: '16px' }
+                    'padding-left': { value: '{size.l}' }
                 },
                 legend: {
-                    'margin-top': { value: '32px' },
-                    'margin-bottom': { value: '16px' }
+                    'margin-top': { value: '{size.3xl}' },
+                    'margin-bottom': { value: '{size.l}' }
                 }
             },
             vertical: {
                 row: {
-                    'margin-bottom': { value: '16px' }
+                    'margin-bottom': { value: '{size.l}' }
                 },
                 label: {
                     'padding-top': { value: '0' },
-                    'padding-bottom': { value: '4px' }
+                    'padding-bottom': { value: '{size.xxs}' }
                 },
                 control: {
-                    'padding-left': { value: '24px' }
+                    'padding-left': { value: '{size.xxl}' }
                 },
                 legend: {
-                    'margin-top': { value: '32px' },
-                    'margin-bottom': { value: '12px' }
+                    'margin-top': { value: '{size.3xl}' },
+                    'margin-bottom': { value: '{size.m}' }
                 }
             },
         },

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

@@ -1,7 +1,7 @@
 {
     input: {
         size: {
-            padding: { value: '0 {padding.control-horizontal}' },
+            padding: { value: '0 {size.m}' },
             width: { value: '100%' }
         },
         font: {

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

@@ -30,9 +30,9 @@
             large: { value: '960px' },
 
             top: { value: '48px' },
-            'close-width': { value: '56px' },
-            'border-radius': { value: '4px' },
-            'border-width': { value: '1px' }
+            'close-width': { value: '{modal-header.size.height}' },
+            'border-radius': { value: '{size.border-radius}' },
+            'border-width': { value: '{size.border-width}' }
         }
     },
     'modal-header': {
@@ -43,7 +43,7 @@
             border: { value: '{dark-color-scheme.foreground.divider}' }
         },
         size: {
-            'border-radius': { value: '4px 4px 0 0' },
+            'border-radius': { value: '{size.border-radius} {size.border-radius} 0 0' },
             height: { value: '{size.6xl}' },
             padding: { value: '0 {size.l}' }
         },
@@ -54,7 +54,7 @@
     'modal-body': {
         size: {
             'max-height': { value: 'calc(100vh - 260px)' },
-            padding: { value: '16px 24px 24px' }
+            padding: { value: '{size.l} {size.xxl} {size.xxl}' }
         },
         font: {
             default: { value: 'body' }
@@ -68,14 +68,14 @@
             border: { value: '{dark-color-scheme.foreground.divider}' }
         },
         size: {
-            'border-radius': { value: '0 0 4px 4px' },
+            '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: '24px' }
+            padding: { value: '{size.xxl}' }
         }
     }
 }

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

@@ -11,7 +11,7 @@
             'divider-background': { value: '{dark-color-scheme.second.palette.value.560}' }
         },
         size: {
-            'icon-margin': { value: '6px' },
+            'icon-margin': { value: '{size.xs}' },
             'right-icon-margin': { value: '{size.3xs}' }
         },
         font: {
@@ -22,9 +22,9 @@
         size: {
             states: {
                 'expanded-width': { value: '240px' },
-                'collapsed-width': { value: '56px' }
+                'collapsed-width': { value: '{size.6xl}' }
             },
-            'icon-margin': { value: '16px' }
+            'icon-margin': { value: '{size.l}' }
         }
     },
     'navbar-item': {
@@ -53,15 +53,15 @@
             }
         },
         size: {
-            padding: { value: '{padding.control-horizontal}' },
-            height: { value: '48px' },
-            height_vertical: { value: '56px' }
+            padding: { value: '{size.l}' },
+            height: { value: '{size.5xl}' },
+            height_vertical: { value: '{size.6xl}' }
         }
     },
     'navbar-brand': {
         size: {
-            padding: { value: '12px' },
-            'margin-right': { value: '24px' }
+            padding: { value: '{size.m}' },
+            'margin-right': { value: '{size.xxl}' }
         },
         font: {
             title: { value: 'title' }

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

@@ -1,8 +1,8 @@
 {
     option: {
         size: {
-            'horizontal-padding': { value: '{padding.option-horizontal}' },
-            height: { value: '32px' },
+            'horizontal-padding': { value: '{size.m}' },
+            height: { value: '{size.3xl}' },
             'border-width': { value: '2px' }
         },
         font: {

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

@@ -14,8 +14,8 @@
         },
         size: {
             'max-height': { value: '480px' },
-            padding: { value: '16px' },
-            'border-radius': { value: '3px' },
+            padding: { value: '{size.l}' },
+            'border-radius': { value: '{size.border-radius}' },
 
         'arrow-size': { value: '12px' },
         'trigger-margin': { value: '9px' },
@@ -41,7 +41,7 @@
     },
     size: {
         height: { value: '{size.4xl}' },
-        padding: { value: '0 16px' }
+        padding: { value: '0 {size.l}' }
     },
     font: {
         default: { value: 'subheading' }
@@ -57,9 +57,9 @@
         background: { value: '{dark-color-scheme.background.background-disabled}' }
     },
     size: {
-        'margin-top': { value: '8px' },
-        padding: { value: '12px {padding.headerFooter-horizontal}' },
-        'height': { value: '56px' }
+        'margin-top': { value: '{size.s}' },
+        padding: { value: '{size.m} {size.l}' },
+        'height': { value: '{size.6xl}' }
     },
     font: {
         default: { value: 'body' }

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

@@ -7,7 +7,7 @@
             background: { value: 'rgba(white,0.06)' }
         },
         size: {
-            height: { value: '4px' }
+            height: { value: '{size.xxs}' }
         }
     }
 }

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

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

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

@@ -1,9 +1,9 @@
 {
     select: {
         size: {
-            'left-padding': { value: '{padding.control-horizontal}' },
-            'right-padding': { value: '8px' },
-            'left-padding-multiple': { value: '8px' }
+            'left-padding': { value: '{size.m}' },
+            'right-padding': { value: '{size.xs}' },
+            'left-padding-multiple': { value: '{select.size.left-padding}' }
         },
         font: {
             default: { value: 'body' }
@@ -13,9 +13,9 @@
         size: {
             'max-height': { value: '232px' },
             'max-width': { value: '640px' },
-            'vertical-padding': { value: '4px' },
-            'border-width': { value: '1px' },
-            'border-radius': { value: '3px' }
+            'vertical-padding': { value: '{size.xxs}' },
+            'border-width': { value: '{size.border-width}' },
+            'border-radius': { value: '{size.border-radius}' }
         },
         font: {
             default: { value: 'body' }

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

@@ -14,7 +14,7 @@
         size: {
             height: { value: '{size.6xl}' },
             padding: { value: '0 {size.l}' },
-            'close-padding': { value: '0 0 0 8px' }
+            'close-padding': { value: '0 0 0 {size.s}' }
         },
         font: {
             default: { value: 'title' }

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

@@ -1,10 +1,10 @@
 {
     table: {
         size: {
-            'border-width': { value: '1px' },
+            'border-width': { value: '{size.border-width}' },
             'row-padding': {
-                vertical: { value: '8px' },
-                horizontal: { value: '16px' }
+                vertical: { value: '{size.s}' },
+                horizontal: { value: '{size.l}' }
             }
         },
         font: {

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

@@ -53,12 +53,12 @@
             }
         },
         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}' }
+            height: { value: '{size.4xl}' },
+            'highlight-height': { value: '{size.xxs}' },
+            'padding-horizontal': { value: '{size.l}' },
+            'border-width': { value: '{size.border-width}' },
+            'border-radius': { value: '{size.border-radius}' },
+            'label-icon-margin': { value: '{size.s}' }
         },
         font: {
             default: { value: 'body' }

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

@@ -101,12 +101,12 @@
             }
         },
         size: {
-            margin: { value: '2px' },
-            height: { value: '{size.badge_tag-height}' },
-            'border-width': { value: '1px' },
-            'border-radius': { value: '4px' },
+            margin: { value: '{size.3xs}' },
+            height: { value: '{size.xxl}' },
+            'border-width': { value: '{size.border-width}' },
+            'border-radius': { value: '{size.border-radius}' },
             'icon-padding': { value: '{size.xxs}' },
-            'text-margin': { value: '{padding.badge_tag-horizontal}' }
+            'text-margin': { value: '{size.s}' }
         },
         font: {
             default: { value: 'caption' },
@@ -116,13 +116,13 @@
     },
     'tag-list': {
         size: {
-            padding: { value: '1px 6px' },
+            padding: { value: '1px {size.m}' },
         }
     },
     'tag-input': {
         size: {
             height: { value: '22px' },
-            margin: { value: '2px 4px' }
+            margin: { value: '2px {size.xxs}' }
         },
         font: {
             default: { value: 'body' }

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

@@ -2,7 +2,7 @@
     textarea: {
         size: {
             'min-height': { value: '50px' },
-            padding: { value: '5px 16px' }
+            padding: { value: '5 {size.m}' }
         },
         font: {
             default: { value: 'body' },

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

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

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

@@ -60,7 +60,7 @@
             height: { value: '16px' },
             width: { value: '28px' },
             'border-radius': { value: '9px' },
-            'label-margin': { value: '{margin.iconText_M-horizontal}' }
+            'label-margin': { value: '{size.s}' }
         },
         font: {
             default: { value: 'body' }

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

@@ -26,9 +26,9 @@
         },
         size: {
             'max-width': { value: '300px' },
-            'border-width': { value: '1px' },
-            'border-radius': { value: '3px' },
-            padding: { value: '8px 16px' },
+            'border-width': { value: '{size.border-width}' },
+            'border-radius': { value: '{size.border-radius}' },
+            padding: { value: '{size.s} {size.l}' },
             'arrow-size': { value: '12px' },
             'trigger-margin': { value: '9px' }
         },
@@ -50,10 +50,10 @@
             shadow: { value: '0 2px 4px 0 rgba(39, 51, 62, 0.2)' },
         },
         size: {
-            'border-radius': { value: '3px' },
+            'border-radius': { value: '{size.border-radius}' },
             'arrow-size': { value: '12px' },
             'trigger-margin': { value: '9px' },
-            padding: { value: '8px 16px' },
+            padding: { value: '{size.s} {size.l}' },
             'max-height': { value: '480px' }
         },
         font: {
@@ -73,7 +73,7 @@
         },
         size: {
             height: { value: '40px' },
-            padding: { value: '10px 16px' }
+            padding: { value: '{size.s} {size.l}' }
         },
         font: {
             default: { value: 'subheading' }

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

@@ -1,7 +1,7 @@
 {
     tree: {
         size: {
-            'node-height': { value: '32px' },
+            'node-height': { value: '{size.3xl}' },
 
             'padding-left': { value: '{size.m}' },
             'toggle-padding': { value: '{size.xxs}' },

package/design-tokens/pt-2022/tokens/properties/colors.json5

@@ -43,6 +43,8 @@
         background: {
             background: { value: 'white' },
             'background-disabled': { value: '{palette.grey.40}' },
+            'background-less-contrast': { value: '{palette.grey.40}' },
+            'background-under': { value: '{palette.grey.40}' },
 
             'overlay-hover': { value: 'rgba(black, 0.05)' },
             'overlay-active': { value: 'rgba(black, 0.1)' },
@@ -100,6 +102,8 @@
         background: {
             background: { value: '{palette.grey.900}' },
             'background-disabled': { value: '{palette.grey.700}' },
+            'background-less-contrast': { value: '{palette.grey.800}' },
+            'background-under': { value: '{palette.grey.1000}' },
 
             'overlay-hover': { value: 'rgba(black, 0.05)' },
             'overlay-active': { value: 'rgba(black, 0.1)' },

package/design-tokens/pt-2022/tokens/properties/globals.json5

@@ -15,7 +15,7 @@
         '7xl': { value: '64px' },
 
         'border-width': '1px',
-        'border-radius': '3px',
+        'border-radius': '4px',
 
         // this will be deleted
         'option-height': '32px',

package/design-tokens/pt-2022/tokens/properties/palette.json5

@@ -13,6 +13,7 @@
             "700": { value: '#023c7f' },
             "800": { value: '#193060' },
             "900": { value: '#00224f' },
+            "1000": { value: '#001a40' },           
             "A100": { value: 'rgba(3, 116, 235, 0.15)' },
             "A200": { value: 'rgba(3, 116, 235, 0.3)' },
             "contrast": {
@@ -44,6 +45,7 @@
             "700": { value: '#004823' },
             "800": { value: '#103920' },
             "900": { value: '#002a12' },
+            "1000": { value: '#00210c' },
             "A100": { value: 'rgba(2, 139, 73, 0.15)' },
             "contrast": {
                 "40": { value: '#4D4D4D' },
@@ -73,6 +75,7 @@
             "700": { value: '#800025' },
             "800": { value: '#621420' },
             "900": { value: '#500013' },
+            "1000": { value: '#41000b' },
             "A100": { value: 'rgba(219, 60, 85, 0.15)' },
 
             "contrast": {
@@ -103,6 +106,7 @@
             "700": { value: '#333f4a' },
             "800": { value: '#27333e' },
             "900": { value: '#19252f' },
+            "1000": { value: '#151e25' },
             "A40": { value: 'rgba(25, 37, 47, 0.04)' },
             "A60": { value: 'rgba(25, 37, 47, 0.06)' },
             "A100": { value: 'rgba(25, 37, 47, 0.1)' },
@@ -137,6 +141,7 @@
             "700": { value: '#543803' },
             "800": { value: '#3e3015' },
             "900": { value: '#312001' },
+            "1000": { value: '#1f1500' },
             "A100": { value: 'rgba(255, 159, 18, 0.15)' },
 
             "contrast": {
@@ -167,6 +172,7 @@
             "700": { value: '#084453' },
             "800": { value: '#143641' },
             "900": { value: '#022731' },
+            "1000": { value: '#001f28' },
             "contrast": {
                 "40": { value: '#4D4D4D' },
                 "60": { value: '#4D4D4D' },
@@ -196,6 +202,7 @@
             "700": { value: '#612853' },
             "800": { value: '#48273f' },
             "900": { value: '#36172e' },
+            "1000": { value: '#23001b' },          
             "contrast": {
                 "40": { value: '#4D4D4D' },
                 "60": { value: '#4D4D4D' },