@ptsecurity/mosaic 12.3.0 → 13.1.1

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

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

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

@@ -0,0 +1,132 @@
+{
+    tags: {
+        'light-color-scheme': {
+            primary: {
+                background: { value: '{light-color-scheme.primary.palette.value.100.value}' },
+                border: { value: '{light-color-scheme.primary.palette.value.100.value}' },
+                text: { value: '{light-color-scheme.primary.default.value}' },
+                icon: { value: 'mix({light-color-scheme.primary.palette.value.400.value}, {light-color-scheme.background.overlay-hover.value})' },
+                states:  {
+                    hover: {
+                        icon: { value: '{light-color-scheme.primary.palette.value.600.value}' }
+                    },
+                    focused:{ value: '{light-color-scheme.primary.palette.value.500.value}' },
+                    disabled: {
+                        text: { value: 'mix({light-color-scheme.primary.palette.value.500.value}, transparent, 50%)' },
+                        background: { value: 'mix({light-color-scheme.primary.palette.value.500.value}, transparent, 10%)' }
+                    }
+                }
+            },
+            second: {
+                background: { value: '{light-color-scheme.second.palette.value.100.value}' },
+                border: { value: '{light-color-scheme.second.palette.value.100.value}' },
+                text: { value: '{light-color-scheme.foreground.text.value}' },
+                icon: { value: 'mix({light-color-scheme.second.palette.value.400.value}, {light-color-scheme.background.overlay-hover.value})' },
+                states: {
+                    hover: {
+                        icon: { value: '{light-color-scheme.second.palette.value.400.value}' }
+                    },
+                    focused: { value: '{light-color-scheme.primary.palette.value.500.value}' },
+                    disabled: {
+                        text: { value: 'mix({light-color-scheme.second.palette.value.300.value}, transparent, 50%)' },
+                        background: { value: 'mix({light-color-scheme.second.palette.value.300.value}, transparent, 10%)' }
+                    }
+                }
+            },
+            error: {
+                background: { value: '{light-color-scheme.error.palette.value.100.value}' },
+                border: { value: '{light-color-scheme.error.palette.value.100.value}' },
+                text: { value: '{light-color-scheme.error.default.value}' },
+                icon: { value: 'mix({light-color-scheme.error.palette.value.400.value}, {light-color-scheme.background.overlay-hover.value})' },
+                states: {
+                    hover: {
+                        icon: { value: '{light-color-scheme.error.palette.value.500.value}' }
+                    },
+                    focused: { value: '{light-color-scheme.error.palette.value.400.value}' },
+                    disabled: {
+                        text: { value: 'mix({light-color-scheme.error.palette.value.400.value}, transparent, 50%)' },
+                        background: { value: 'mix({light-color-scheme.error.palette.value.400.value}, transparent, 10%)' }
+                    }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            primary: {
+                background: { value: '{dark-color-scheme.primary.palette.value.700.value}' },
+                border: { value: '{dark-color-scheme.primary.palette.value.700.value}' },
+                text: { value: '{dark-color-scheme.primary.palette.value.200.value}' },
+                icon: { value: 'mix({dark-color-scheme.primary.palette.value.400.value}, {dark-color-scheme.background.overlay-hover.value})' },
+                states: {
+                    hover: {
+                        icon: { value: '{dark-color-scheme.primary.palette.value.500.value}' }
+                    },
+                    focused: { value: '{dark-color-scheme.primary.palette.value.400.value}' },
+                    disabled: {
+                        text: { value: 'mix({dark-color-scheme.primary.palette.value.400.value}, transparent, 50%)' },
+                        background: { value: 'mix({dark-color-scheme.primary.palette.value.400.value}, transparent, 10%)' }
+                    }
+                }
+            },
+            second: {
+                background: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+                border: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+                text: { value: '{dark-color-scheme.second.palette.value.200.value}' },
+                icon: { value: 'mix({dark-color-scheme.second.palette.value.400.value}, {dark-color-scheme.background.overlay-hover.value})' },
+                states: {
+                    hover: {
+                        icon: { value: '{dark-color-scheme.second.palette.value.100.value}' }
+                    },
+                    focused: { value: '{dark-color-scheme.primary.palette.value.400.value}' },
+                    disabled: {
+                        text: { value: 'mix({dark-color-scheme.second.palette.value.400.value}, transparent, 50%)' },
+                        background: { value: 'mix({dark-color-scheme.second.palette.value.400.value}, transparent, 10%)' }
+                    }
+                }
+            },
+            error: {
+                background: { value: '{dark-color-scheme.error.palette.value.700.value}' },
+                border: { value: '{dark-color-scheme.error.palette.value.700.value}' },
+                text: { value: '{dark-color-scheme.error.palette.value.200.value}' },
+                icon: { value: 'mix({dark-color-scheme.error.palette.value.400.value}, {dark-color-scheme.background.overlay-hover.value})' },
+                states: {
+                    hover: {
+                        icon: { value: '{dark-color-scheme.error.palette.value.200.value}' }
+                    },
+                    focused: { value: '{dark-color-scheme.error.palette.value.400.value}' },
+                    disabled: {
+                        text: { value: 'mix({dark-color-scheme.error.palette.value.400.value}, transparent, 50%)' },
+                        background: { value: 'mix({dark-color-scheme.error.palette.value.400.value}, transparent, 10%)' }
+                    }
+                }
+            }
+        },
+        size: {
+            margin: { value: '2px' },
+            height: { value: '{size.badge_tag-height}' },
+            'border-width': { value: '1px' },
+            'border-radius': { value: '4px' },
+            'icon-padding': { value: '3px' },
+            'text-margin': { value: '{padding.badge_tag-horizontal}' }
+        },
+        font: {
+            default: { value: 'caption' },
+            mono: { value: 'caption-mono' },
+            caps: { value: 'caption-caps' }
+        }
+    },
+    'tag-list': {
+        size: {
+            padding: { value: '1px 6px' },
+            'min-height': { value: '30px' }
+        }
+    },
+    'tag-input': {
+        size: {
+            height: { value: '22px' },
+            margin: { value: '2px 4px' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    }
+}

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

@@ -0,0 +1,79 @@
+{
+    toggle: {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.border.value}' },
+            background: {
+                value: 'linear-gradient(to bottom, {light-color-scheme.second.palette.value.100.value}, {light-color-scheme.background.background-disabled.value})'
+            },
+            'circle-border': { value: '{light-color-scheme.foreground.border.value}' },
+            'circle-background': { value: 'linear-gradient(to bottom, white, {light-color-scheme.second.palette.value.100.value})' },
+
+            states: {
+                focused: {
+                    shadow: {
+                        value: 'inset 0 0 0 1px {light-color-scheme.background.background.value}, 0 0 0 2px {light-color-scheme.primary.palette.value.500.value}'
+                    }
+                }
+            },
+            primary: {
+                checked: {
+                    'border-color': { value: '{light-color-scheme.primary.default.value}'},
+                    background: { value: '{light-color-scheme.primary.default.value}'}
+                }
+            },
+            error: {
+                checked: {
+                    'border-color': { value: '{light-color-scheme.error.default.value}'},
+                    background: { value: '{light-color-scheme.error.default.value}'}
+                }
+            }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.border.value}' },
+            background: {
+                value: '{dark-color-scheme.background.background.value}'
+            },
+            'circle-border': { value: '{dark-color-scheme.foreground.border.value}' },
+            'circle-background': { value: 'white' },
+
+            states: {
+                focused: {
+                    shadow: {
+                        value: 'inset 0 0 0 1px {dark-color-scheme.background.background.value}, 0 0 0 2px {dark-color-scheme.primary.palette.value.400.value}'
+                    }
+                }
+            },
+            primary: {
+                checked: {
+                    'border-color': { value: '{dark-color-scheme.primary.default.value}'},
+                    background: { value: '{dark-color-scheme.primary.default.value}'}
+                }
+            },
+            error: {
+                checked: {
+                    'border-color': { value: '{dark-color-scheme.error.default.value}'},
+                    background: { value: '{dark-color-scheme.error.default.value}'}
+                }
+            }
+        },
+        size: {
+            height: { value: '16px' },
+            width: { value: '28px' },
+            'border-radius': { value: '9px' },
+            'label-margin': { value: '{margin.iconText_M-horizontal}' }
+        },
+        font: {
+            default: { value: 'body' }
+        }
+    },
+    'toggle-small': {
+        size: {
+            height: { value: '14px' },
+            width: { value: '24px' },
+            'border-radius': { value: '8px' }
+        },
+        font: {
+            default: { value: 'caption' }
+        }
+    }
+}