@ptsecurity/mosaic 13.0.0 → 13.2.0

package/design-tokens/{tokens → legacy-2017/tokens}/components/toggle.json5

@@ -14,6 +14,18 @@
                         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': {
@@ -30,6 +42,18 @@
                         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: {

package/design-tokens/{tokens → legacy-2017/tokens}/properties/colors.json5

@@ -34,6 +34,8 @@
             text: { value: '{palette.grey.700.value}' },
             'text-less-contrast': { value: '{palette.grey.400.value}'},
             'text-disabled': { value: '{palette.grey.300.value}' },
+            'text-error': { value: '{light-color-scheme.error.palette.value.500.value}' },
+            'text-success': { value: '{light-color-scheme.success.palette.value.560.value}' },
             divider: { value: '{palette.grey.100.value}' },
             border: { value: '{palette.grey.300.value}' },
             icon: { value: '{palette.grey.400.value}' }
@@ -88,6 +90,8 @@
             text: { value: '{palette.grey.60.value}' },
             'text-less-contrast': { value: '{palette.grey.400.value}'},
             'text-disabled': { value: '{palette.grey.400.value}' },
+            'text-error': { value: '{dark-color-scheme.error.palette.value.400.value}' },
+            'text-success': { value: '{dark-color-scheme.success.palette.value.400.value}' },
             divider: { value: '{palette.grey.600.value}' },
             border: { value: '{palette.grey.500.value}' },
             icon: { value: '{palette.grey.400.value}' }

package/design-tokens/{tokens → legacy-2017/tokens}/properties/globals.json5

@@ -1,5 +1,23 @@
 {
     size: {
+        '3xs': '2px',
+        'xxs': '4px',
+        'xs': '6px',
+        's': '8px',
+        'm': '12px',
+        'l': '16px',
+        'xl': '20px',
+        'xxl': '24px',
+        '3xl': '32px',
+        '4xl': '40px',
+        '5xl': '48px',
+        '6xl': '56px',
+        '7xl': '64px',
+
+        'border-width': '1px',
+        'border-radius': '3px',
+
+        // this will be deleted
         'option-height': '32px',
         'panel-height': '48px',
         // у radio и checkbox в макетах 20px, у тоггла есть две модификации на 16px и 14px
@@ -12,7 +30,8 @@
         'badge_tag-height': '24px',
         // modal; sidepanel - сейчас в этих компонентах paddings
         'header-height': '56px',
-        'footer-height': '64px'
+        'footer-height': '64px',
+        // this will be deleted
     },
     padding: {
         'control-horizontal': '16px',

package/design-tokens/{tokens.d.ts → legacy-2017/tokens.d.ts}

@@ -2387,6 +2387,8 @@ export declare const LightColorSchemeWarningPalette: {
 export declare const LightColorSchemeForegroundText = "#4D4D4D";
 export declare const LightColorSchemeForegroundTextLessContrast = "#999999";
 export declare const LightColorSchemeForegroundTextDisabled = "#B3B3B3";
+export declare const LightColorSchemeForegroundTextError = "#E04D36";
+export declare const LightColorSchemeForegroundTextSuccess = "#449327";
 export declare const LightColorSchemeForegroundDivider = "#E6E6E6";
 export declare const LightColorSchemeForegroundBorder = "#B3B3B3";
 export declare const LightColorSchemeForegroundIcon = "#999999";
@@ -4785,6 +4787,8 @@ export declare const DarkColorSchemeWarningPalette: {
 export declare const DarkColorSchemeForegroundText = "#F0F0F0";
 export declare const DarkColorSchemeForegroundTextLessContrast = "#999999";
 export declare const DarkColorSchemeForegroundTextDisabled = "#999999";
+export declare const DarkColorSchemeForegroundTextError = "#E76E5C";
+export declare const DarkColorSchemeForegroundTextSuccess = "#6FBA53";
 export declare const DarkColorSchemeForegroundDivider = "#666666";
 export declare const DarkColorSchemeForegroundBorder = "#808080";
 export declare const DarkColorSchemeForegroundIcon = "#999999";
@@ -7041,28 +7045,6 @@ export declare const AlertFontSmallBody = "caption";
 export declare const AutocompleteSizePanelPadding = "4px 0";
 export declare const AutocompleteSizePanelMaxHeight = "256px";
 export declare const AutocompleteSizePanelBorderRadius = "3px";
-export declare const BadgeSizeDefaultMinWidth = "10px";
-export declare const BadgeSizeDefaultPadding = "0 8px";
-export declare const BadgeSizeDefaultBorderWidth = "1px";
-export declare const BadgeSizeDefaultBorderRadius = "4px";
-export declare const BadgeSizeDefaultHeight = "24px";
-export declare const BadgeSizeDefaultFontDefault = "caption";
-export declare const BadgeSizeDefaultFontCaps = "caption-caps";
-export declare const BadgeSizeDefaultFontMono = "caption-mono";
-export declare const BadgeSizeMiniHeight = "16px";
-export declare const BadgeSizeMiniMinWidth = "10px";
-export declare const BadgeSizeMiniBorderWidth = "1px";
-export declare const BadgeSizeMiniBorderRadius = "2px";
-export declare const BadgeSizeMiniPadding = "0 4px";
-export declare const BadgeSizeMiniFontDefault = "extra-small-text";
-export declare const BadgeSizeMiniFontCaps = "extra-small-text-caps";
-export declare const BadgeSizeMiniFontMono = "extra-small-text-mono";
-export declare const BadgeFontDefaultDefault = "caption";
-export declare const BadgeFontDefaultCaps = "caption-caps";
-export declare const BadgeFontDefaultMono = "caption-mono";
-export declare const BadgeFontMiniDefault = "extra-small-text";
-export declare const BadgeFontMiniCaps = "extra-small-text-caps";
-export declare const BadgeFontMiniMono = "extra-small-text-mono";
 export declare const BadgeLightColorSchemeSolidPrimaryBackground = "#338FCC";
 export declare const BadgeLightColorSchemeSolidPrimaryColor = "white";
 export declare const BadgeLightColorSchemeSolidPrimaryBorder = "#338FCC";
@@ -7141,6 +7123,22 @@ export declare const BadgeDarkColorSchemeSolidLightColor = "white";
 export declare const BadgeDarkColorSchemeSolidSecondBorder = "#4D4D4D";
 export declare const BadgeDarkColorSchemeSolidSecondBackground = "#4D4D4D";
 export declare const BadgeDarkColorSchemeSolidSecondColor = "white";
+export declare const BadgeSizeDefaultHeight = "24px";
+export declare const BadgeSizeDefaultMinWidth = "10px";
+export declare const BadgeSizeDefaultPadding = "0 8px";
+export declare const BadgeSizeDefaultBorderWidth = "1px";
+export declare const BadgeSizeDefaultBorderRadius = "4px";
+export declare const BadgeSizeMiniHeight = "16px";
+export declare const BadgeSizeMiniMinWidth = "10px";
+export declare const BadgeSizeMiniBorderWidth = "1px";
+export declare const BadgeSizeMiniBorderRadius = "2px";
+export declare const BadgeSizeMiniPadding = "0 4px";
+export declare const BadgeFontDefaultDefault = "caption";
+export declare const BadgeFontDefaultCaps = "caption-caps";
+export declare const BadgeFontDefaultMono = "caption-mono";
+export declare const BadgeFontMiniDefault = "extra-small-text";
+export declare const BadgeFontMiniCaps = "extra-small-text-caps";
+export declare const BadgeFontMiniMono = "extra-small-text-mono";
 export declare const ButtonToggleSizeBorderSize = "1px";
 export declare const ButtonToggleSizeBorderRadius = "3px";
 export declare const ButtonLightColorSchemeActiveShadow = "inset 0 1px 2px 0 rgba(black, 0.2)";
@@ -7232,12 +7230,12 @@ export declare const CheckboxLightColorSchemeBorder = "#B3B3B3";
 export declare const CheckboxLightColorSchemeStatesCheckedBorder = "#206EA2";
 export declare const CheckboxLightColorSchemeStatesCheckedBackground = "#338FCC";
 export declare const CheckboxLightColorSchemeStatesFocusedBorder = "#206EA2";
-export declare const CheckboxLightColorSchemeStatesFocusedShadow = "inset 0 0 0 1px white, 0 0 0 1px #206EA2";
+export declare const CheckboxLightColorSchemeStatesFocusedShadow = "0 0 0 1px #206EA2";
 export declare const CheckboxDarkColorSchemeBorder = "#999999";
 export declare const CheckboxDarkColorSchemeStatesCheckedBorder = "#57A4D7";
 export declare const CheckboxDarkColorSchemeStatesCheckedBackground = "#206EA2";
 export declare const CheckboxDarkColorSchemeStatesFocusedBorder = "#57A4D7";
-export declare const CheckboxDarkColorSchemeStatesFocusedShadow = "inset 0 0 0 1px #333333, 0 0 0 1px #57A4D7";
+export declare const CheckboxDarkColorSchemeStatesFocusedShadow = "0 0 0 1px #57A4D7";
 export declare const CheckboxSizeWidth = "16px";
 export declare const CheckboxSizeLabelMargin = "8px";
 export declare const CheckboxSizeBorderWidth = "1px";
@@ -7269,6 +7267,22 @@ export declare const DatepickerCalendarFontHeader = "caption";
 export declare const DatepickerInputSizeWidth = "130px";
 export declare const DividerSizeWidth = "1px";
 export declare const DividerSizeInsetMargin = "80px";
+export declare const DescriptionListLightColorSchemeDt = "#999999";
+export declare const DescriptionListLightColorSchemeDd = "#4D4D4D";
+export declare const DescriptionListDarkColorSchemeDt = "#999999";
+export declare const DescriptionListDarkColorSchemeDd = "#F0F0F0";
+export declare const DescriptionListSizeGridTemplateColumns = "repeat(4, 1fr)";
+export declare const DescriptionListSizeDtGridColumn = "1";
+export declare const DescriptionListSizeDdGridColumn = "2 / span 3";
+export declare const DescriptionListSizeHorizontalColumnGap = "16px";
+export declare const DescriptionListSizeHorizontalRowGap = "12px";
+export declare const DescriptionListSizeVerticalColumnGap = "0";
+export declare const DescriptionListSizeVerticalRowGap = "2px";
+export declare const DescriptionListSizeVerticalDdMarginBottom = "16px";
+export declare const DescriptionListFontHorizontalDt = "body";
+export declare const DescriptionListFontHorizontalDd = "body";
+export declare const DescriptionListFontVerticalDt = "caption";
+export declare const DescriptionListFontVerticalDd = "body";
 export declare const DropdownItemSizePadding = "5px 15px";
 export declare const DropdownItemSizeIconPadding = "0 8px 2px 0";
 export declare const DropdownItemFontDefault = "body";
@@ -7300,6 +7314,21 @@ export declare const FormFieldSizeButtonWidth = "32px";
 export declare const FormFieldFontDefault = "body";
 export declare const FormFieldHintSizeMarginTop = "4px";
 export declare const FormFieldHintFontDefault = "caption";
+export declare const FormFieldPasswordHintLightColorSchemeTextColor = "#4D4D4D";
+export declare const FormFieldPasswordHintLightColorSchemeIconColor = "#4D4D4D";
+export declare const FormFieldPasswordHintLightColorSchemeStatesInvalidIconColor = "#E04D36";
+export declare const FormFieldPasswordHintLightColorSchemeStatesInvalidTextColor = "#4D4D4D";
+export declare const FormFieldPasswordHintLightColorSchemeStatesValidTextColor = "#449327";
+export declare const FormFieldPasswordHintLightColorSchemeStatesValidIconColor = "#449327";
+export declare const FormFieldPasswordHintDarkColorSchemeTextColor = "#F0F0F0";
+export declare const FormFieldPasswordHintDarkColorSchemeIconColor = "#F0F0F0";
+export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidIconColor = "#E76E5C";
+export declare const FormFieldPasswordHintDarkColorSchemeStatesInvalidTextColor = "#F0F0F0";
+export declare const FormFieldPasswordHintDarkColorSchemeStatesValidTextColor = "#6FBA53";
+export declare const FormFieldPasswordHintDarkColorSchemeStatesValidIconColor = "#6FBA53";
+export declare const FormFieldPasswordHintSizeMarginTop = "8px";
+export declare const FormFieldPasswordHintSizeIconMargin = "4px";
+export declare const FormFieldPasswordHintFontDefault = "caption";
 export declare const FormsLightColorSchemeLabel = "#999999";
 export declare const FormsLightColorSchemeLegend = "#4D4D4D";
 export declare const FormsDarkColorSchemeLabel = "#999999";
@@ -7365,12 +7394,16 @@ export declare const ModalSizeTop = "48px";
 export declare const ModalSizeCloseWidth = "56px";
 export declare const ModalSizeBorderRadius = "4px";
 export declare const ModalSizeBorderWidth = "1px";
+export declare const ModalHeaderLightColorSchemeBorder = "#E6E6E6";
+export declare const ModalHeaderDarkColorSchemeBorder = "#666666";
 export declare const ModalHeaderSizeBorderRadius = "4px 4px 0 0";
 export declare const ModalHeaderSizePadding = "14px 16px";
 export declare const ModalHeaderFontDefault = "title";
 export declare const ModalBodySizeMaxHeight = "calc(100vh - 260px)";
 export declare const ModalBodySizePadding = "16px 24px 24px";
 export declare const ModalBodyFontDefault = "body";
+export declare const ModalFooterLightColorSchemeBorder = "#E6E6E6";
+export declare const ModalFooterDarkColorSchemeBorder = "#666666";
 export declare const ModalFooterSizeBorderRadius = "0 0 4px 4px";
 export declare const ModalFooterSizePadding = "16px 16px";
 export declare const ModalConfirmSizePadding = "24px";
@@ -7386,12 +7419,14 @@ export declare const VerticalNavbarSizeIconMargin = "16px";
 export declare const NavbarItemLightColorSchemeText = "#D8EAF7";
 export declare const NavbarItemLightColorSchemeIcon = "#D8EAF7";
 export declare const NavbarItemLightColorSchemeStatesActive = "rgba(0, 0, 0, 0.1)";
+export declare const NavbarItemLightColorSchemeStatesSelected = "#4D4D4D";
 export declare const NavbarItemLightColorSchemeStatesHover = "rgba(255, 255, 255, 0.1)";
 export declare const NavbarItemLightColorSchemeStatesProgress = "#07314D";
 export declare const NavbarItemLightColorSchemeStatesDisabledOpacity = 0.3;
 export declare const NavbarItemDarkColorSchemeText = "#D8EAF7";
 export declare const NavbarItemDarkColorSchemeIcon = "#D8EAF7";
 export declare const NavbarItemDarkColorSchemeStatesActive = "rgba(0, 0, 0, 0.1)";
+export declare const NavbarItemDarkColorSchemeStatesSelected = "#666666";
 export declare const NavbarItemDarkColorSchemeStatesHover = "rgba(255, 255, 255, 0.1)";
 export declare const NavbarItemDarkColorSchemeStatesProgress = "#07314D";
 export declare const NavbarItemDarkColorSchemeStatesDisabledOpacity = 0.3;
@@ -7497,11 +7532,27 @@ export declare const TableSizeRowPaddingHorizontal = "16px";
 export declare const TableFontHeader = "caption";
 export declare const TableFontBody = "body";
 export declare const TabsLightColorSchemeBorder = "#B3B3B3";
-export declare const TabsLightColorSchemeStateActive = "#338FCC";
-export declare const TabsLightColorSchemeStateDisabledOverlay = "rgba(white, 0.5)";
+export declare const TabsLightColorSchemeStateNormalIcon = "#999999";
+export declare const TabsLightColorSchemeStateNormalText = "#4D4D4D";
+export declare const TabsLightColorSchemeStateHoverIcon = "#4D4D4D";
+export declare const TabsLightColorSchemeStateHoverText = "#4D4D4D";
+export declare const TabsLightColorSchemeStateActiveMarkerColor = "#338FCC";
+export declare const TabsLightColorSchemeStateEmptyIcon = "#B3B3B3";
+export declare const TabsLightColorSchemeStateEmptyText = "#B3B3B3";
+export declare const TabsLightColorSchemeStateDisabledIcon = "#B3B3B3";
+export declare const TabsLightColorSchemeStateDisabledText = "#B3B3B3";
+export declare const TabsLightColorSchemeStateDisabledMarkerOpacity = "0.3";
 export declare const TabsDarkColorSchemeBorder = "#B3B3B3";
-export declare const TabsDarkColorSchemeStateActive = "#57A4D7";
-export declare const TabsDarkColorSchemeStateDisabledOverlay = "rgba(white, 0.5)";
+export declare const TabsDarkColorSchemeStateNormalIcon = "#999999";
+export declare const TabsDarkColorSchemeStateNormalText = "#F0F0F0";
+export declare const TabsDarkColorSchemeStateHoverIcon = "#F0F0F0";
+export declare const TabsDarkColorSchemeStateHoverText = "#F0F0F0";
+export declare const TabsDarkColorSchemeStateActiveMarkerColor = "#57A4D7";
+export declare const TabsDarkColorSchemeStateEmptyIcon = "#999999";
+export declare const TabsDarkColorSchemeStateEmptyText = "#999999";
+export declare const TabsDarkColorSchemeStateDisabledIcon = "#999999";
+export declare const TabsDarkColorSchemeStateDisabledText = "#999999";
+export declare const TabsDarkColorSchemeStateDisabledMarkerOpacity = "0.3";
 export declare const TabsSizeHeight = "40px";
 export declare const TabsSizeHighlightHeight = "4px";
 export declare const TabsSizePaddingHorizontal = "16px";
@@ -7509,8 +7560,17 @@ export declare const TabsSizeBorderWidth = "1px";
 export declare const TabsSizeBorderRadius = "3px";
 export declare const TabsSizeLabelIconMargin = "8px";
 export declare const TabsFontDefault = "body";
+export declare const VerticalTabsLightColorSchemeStateNormalBackground = "transparent";
+export declare const VerticalTabsLightColorSchemeStateSelectedBackground = "#D8EAF7";
+export declare const VerticalTabsLightColorSchemeStateHoverBackground = "rgba(black, 0.05)";
+export declare const VerticalTabsLightColorSchemeStateHoverSelectedBackground = "adjust-color(#D8EAF7, $saturation:-22%, $lightness:-5%)";
+export declare const VerticalTabsDarkColorSchemeStateNormalBackground = "transparent";
+export declare const VerticalTabsDarkColorSchemeStateSelectedBackground = "#114E77";
+export declare const VerticalTabsDarkColorSchemeStateHoverBackground = "rgba(black, 0.05)";
+export declare const VerticalTabsDarkColorSchemeStateHoverSelectedBackground = "adjust-color(#114E77, $lightness:-1%)";
 export declare const TagsLightColorSchemePrimaryBackground = "#D8EAF7";
 export declare const TagsLightColorSchemePrimaryBorder = "#D8EAF7";
+export declare const TagsLightColorSchemePrimaryText = "#338FCC";
 export declare const TagsLightColorSchemePrimaryIcon = "mix(#57A4D7, rgba(black, 0.05))";
 export declare const TagsLightColorSchemePrimaryStatesHoverIcon = "#206EA2";
 export declare const TagsLightColorSchemePrimaryStatesFocused = "#338FCC";
@@ -7518,6 +7578,7 @@ export declare const TagsLightColorSchemePrimaryStatesDisabledText = "mix(#338FC
 export declare const TagsLightColorSchemePrimaryStatesDisabledBackground = "mix(#338FCC, transparent, 10%)";
 export declare const TagsLightColorSchemeSecondBackground = "#E6E6E6";
 export declare const TagsLightColorSchemeSecondBorder = "#E6E6E6";
+export declare const TagsLightColorSchemeSecondText = "#4D4D4D";
 export declare const TagsLightColorSchemeSecondIcon = "mix(#999999, rgba(black, 0.05))";
 export declare const TagsLightColorSchemeSecondStatesHoverIcon = "#999999";
 export declare const TagsLightColorSchemeSecondStatesFocused = "#338FCC";
@@ -7525,6 +7586,7 @@ export declare const TagsLightColorSchemeSecondStatesDisabledText = "mix(#B3B3B3
 export declare const TagsLightColorSchemeSecondStatesDisabledBackground = "mix(#B3B3B3, transparent, 10%)";
 export declare const TagsLightColorSchemeErrorBackground = "#FADEDA";
 export declare const TagsLightColorSchemeErrorBorder = "#FADEDA";
+export declare const TagsLightColorSchemeErrorText = "#E76E5C";
 export declare const TagsLightColorSchemeErrorIcon = "mix(#E76E5C, rgba(black, 0.05))";
 export declare const TagsLightColorSchemeErrorStatesHoverIcon = "#E04D36";
 export declare const TagsLightColorSchemeErrorStatesFocused = "#E76E5C";
@@ -7532,6 +7594,7 @@ export declare const TagsLightColorSchemeErrorStatesDisabledText = "mix(#E76E5C,
 export declare const TagsLightColorSchemeErrorStatesDisabledBackground = "mix(#E76E5C, transparent, 10%)";
 export declare const TagsDarkColorSchemePrimaryBackground = "#114E77";
 export declare const TagsDarkColorSchemePrimaryBorder = "#114E77";
+export declare const TagsDarkColorSchemePrimaryText = "#AAD1EC";
 export declare const TagsDarkColorSchemePrimaryIcon = "mix(#57A4D7, rgba(black, 0.05))";
 export declare const TagsDarkColorSchemePrimaryStatesHoverIcon = "#338FCC";
 export declare const TagsDarkColorSchemePrimaryStatesFocused = "#57A4D7";
@@ -7539,6 +7602,7 @@ export declare const TagsDarkColorSchemePrimaryStatesDisabledText = "mix(#57A4D7
 export declare const TagsDarkColorSchemePrimaryStatesDisabledBackground = "mix(#57A4D7, transparent, 10%)";
 export declare const TagsDarkColorSchemeSecondBackground = "#4D4D4D";
 export declare const TagsDarkColorSchemeSecondBorder = "#4D4D4D";
+export declare const TagsDarkColorSchemeSecondText = "#CCCCCC";
 export declare const TagsDarkColorSchemeSecondIcon = "mix(#999999, rgba(black, 0.05))";
 export declare const TagsDarkColorSchemeSecondStatesHoverIcon = "#E6E6E6";
 export declare const TagsDarkColorSchemeSecondStatesFocused = "#57A4D7";
@@ -7546,6 +7610,7 @@ export declare const TagsDarkColorSchemeSecondStatesDisabledText = "mix(#999999,
 export declare const TagsDarkColorSchemeSecondStatesDisabledBackground = "mix(#999999, transparent, 10%)";
 export declare const TagsDarkColorSchemeErrorBackground = "#832112";
 export declare const TagsDarkColorSchemeErrorBorder = "#832112";
+export declare const TagsDarkColorSchemeErrorText = "#F4B7AE";
 export declare const TagsDarkColorSchemeErrorIcon = "mix(#E76E5C, rgba(black, 0.05))";
 export declare const TagsDarkColorSchemeErrorStatesHoverIcon = "#F4B7AE";
 export declare const TagsDarkColorSchemeErrorStatesFocused = "#E76E5C";
@@ -7575,11 +7640,19 @@ export declare const ToggleLightColorSchemeBackground = "linear-gradient(to bott
 export declare const ToggleLightColorSchemeCircleBorder = "#B3B3B3";
 export declare const ToggleLightColorSchemeCircleBackground = "linear-gradient(to bottom, white, #E6E6E6)";
 export declare const ToggleLightColorSchemeStatesFocusedShadow = "inset 0 0 0 1px white, 0 0 0 2px #338FCC";
+export declare const ToggleLightColorSchemePrimaryCheckedBorderColor = "#338FCC";
+export declare const ToggleLightColorSchemePrimaryCheckedBackground = "#338FCC";
+export declare const ToggleLightColorSchemeErrorCheckedBorderColor = "#E76E5C";
+export declare const ToggleLightColorSchemeErrorCheckedBackground = "#E76E5C";
 export declare const ToggleDarkColorSchemeBorder = "#808080";
 export declare const ToggleDarkColorSchemeBackground = "#333333";
 export declare const ToggleDarkColorSchemeCircleBorder = "#808080";
 export declare const ToggleDarkColorSchemeCircleBackground = "white";
 export declare const ToggleDarkColorSchemeStatesFocusedShadow = "inset 0 0 0 1px #333333, 0 0 0 2px #57A4D7";
+export declare const ToggleDarkColorSchemePrimaryCheckedBorderColor = "#57A4D7";
+export declare const ToggleDarkColorSchemePrimaryCheckedBackground = "#57A4D7";
+export declare const ToggleDarkColorSchemeErrorCheckedBorderColor = "#E76E5C";
+export declare const ToggleDarkColorSchemeErrorCheckedBackground = "#E76E5C";
 export declare const ToggleSizeHeight = "16px";
 export declare const ToggleSizeWidth = "28px";
 export declare const ToggleSizeBorderRadius = "9px";

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

@@ -0,0 +1,83 @@
+{
+    alert: {
+        'light-color-scheme': {
+            error: {
+                background: { value: '{light-color-scheme.error.palette.value.40.value}' },
+                border: { value: '{light-color-scheme.error.palette.value.100.value}' },
+                icon: { value: '{light-color-scheme.error.palette.value.300.value}' }
+            },
+            warning: {
+                background: { value: '{light-color-scheme.warning.palette.value.40.value}' },
+                border: { value: '{light-color-scheme.warning.palette.value.100.value}' },
+                icon: { value: '{light-color-scheme.warning.palette.value.300.value}' }
+            },
+            success: {
+                background: { value: '{light-color-scheme.success.palette.value.40.value}' },
+                border: { value: '{light-color-scheme.success.palette.value.100.value}' },
+                icon: { value: '{light-color-scheme.success.palette.value.300.value}' }
+            },
+            info: {
+                background: { value: '{light-color-scheme.info.palette.value.40.value}' },
+                border: { value: '{light-color-scheme.info.palette.value.100.value}' },
+                icon: { value: '{light-color-scheme.info.palette.value.300.value}' }
+            },
+            default: {
+                background: { value: '{light-color-scheme.second.palette.value.40.value}' },
+                border: { value: '{light-color-scheme.second.palette.value.100.value}' },
+                icon: { value: '{light-color-scheme.second.palette.value.300.value}' }
+            }
+        },
+        'dark-color-scheme': {
+            error: {
+                background: { value: '{dark-color-scheme.error.palette.value.900.value}' },
+                border: { value: '{dark-color-scheme.error.palette.value.700.value}' },
+                icon: { value: '{dark-color-scheme.error.palette.value.300.value}' }
+            },
+            warning: {
+                background: { value: '{dark-color-scheme.warning.palette.value.800.value}' },
+                border: { value: '{dark-color-scheme.warning.palette.value.700.value}' },
+                icon: { value: '{dark-color-scheme.warning.palette.value.300.value}' }
+            },
+            success: {
+                background: { value: '{dark-color-scheme.success.palette.value.800.value}' },
+                border: { value: '{dark-color-scheme.success.palette.value.700.value}' },
+                icon: { value: '{dark-color-scheme.success.palette.value.300.value}' }
+            },
+            info: {
+                background: { value: '{dark-color-scheme.info.palette.value.800.value}' },
+                border: { value: '{dark-color-scheme.info.palette.value.700.value}' },
+                icon: { value: '{dark-color-scheme.info.palette.value.300.value}' }
+            },
+            default: {
+                background: { value: '{dark-color-scheme.second.palette.value.800.value}' },
+                border: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+                icon: { value: '{dark-color-scheme.second.palette.value.300.value}' }
+            }
+        },
+        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/pt-2022/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/pt-2022/tokens/components/badge.json5

@@ -0,0 +1,174 @@
+{
+    badge: {
+        'light-color-scheme': {
+            solid: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.400.value}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.400.value}' },
+                    color: { value: 'white' },
+                },
+                info: {
+                    background: { value: '{light-color-scheme.info.palette.value.400.value}' },
+                    border: { value: '{light-color-scheme.info.palette.value.400.value}' },
+                    color: { value: 'white' }
+                },
+                success: {
+                    background: { value: '{light-color-scheme.success.palette.value.400.value}' },
+                    border: { value: '{light-color-scheme.success.palette.value.400.value}' },
+                    color: { value: 'white' }
+                },
+                warning: {
+                    background: { value: '{light-color-scheme.warning.palette.value.400.value}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.400.value}' },
+                    color: { value: 'white' }
+                },
+                error: {
+                    background: { value: '{light-color-scheme.error.palette.value.400.value}' },
+                    border: { value: '{light-color-scheme.error.palette.value.400.value}' },
+                    color: { value: 'white' }
+                },
+                transparent: {
+                    background: { value: 'transparent' },
+                    border: { value: '{light-color-scheme.second.palette.value.200.value}' },
+                    color: { value: '{light-color-scheme.second.palette.value.900.value}' },
+                },
+                light: {
+                    background: { value: '{light-color-scheme.second.palette.value.100.value}' },
+                    border: { value: '{light-color-scheme.second.palette.value.100.value}' },
+                    color: { value: '{light-color-scheme.second.palette.value.900.value}' }
+                },
+                second: {
+                    background: { value: '{light-color-scheme.second.palette.value.400.value}' },
+                    border: { value: '{light-color-scheme.second.palette.value.400.value}' },
+                    color: { value: 'white' }
+                }
+            },
+            pastel: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.40.value}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.200.value}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.400.value}' }
+                },
+                info: {
+                    background: { value: '{light-color-scheme.info.palette.value.40.value}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.200.value}' },
+                    color: { value: '{light-color-scheme.info.palette.value.400.value}' }
+                },
+                success: {
+                    background: { value: '{light-color-scheme.success.palette.value.40.value}' },
+                    border: { value: '{light-color-scheme.success.palette.value.200.value}' },
+                    color: { value: '{light-color-scheme.success.palette.value.500.value}' }
+                },
+                warning: {
+                    background: { value: '{light-color-scheme.warning.palette.value.40.value}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.200.value}' },
+                    color: { value: '{light-color-scheme.warning.palette.value.500.value}' }
+                },
+                error: {
+                    background: { value: '{light-color-scheme.error.palette.value.40.value}' },
+                    border: { value: '{light-color-scheme.error.palette.value.200.value}' },
+                    color: { value: '{light-color-scheme.error.palette.value.500.value}' }
+                }
+            }
+        },
+        'dark-color-scheme': {
+            pastel: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.800.value}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.600.value}' },
+                    color: { value: '{light-color-scheme.primary.palette.value.200.value}' },
+                },
+                info: {
+                    background: { value: '{light-color-scheme.info.palette.value.800.value}' },
+                    border: { value: '{light-color-scheme.info.palette.value.600.value}' },
+                    color: { value: '{light-color-scheme.info.palette.value.200.value}' },
+                },
+                success: {
+                    background: { value: '{light-color-scheme.success.palette.value.800.value}' },
+                    border: { value: '{light-color-scheme.success.palette.value.600.value}' },
+                    color: { value: '{light-color-scheme.success.palette.value.200.value}' }
+                },
+                warning: {
+                    background: { value: '{light-color-scheme.warning.palette.value.800.value}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.600.value}' },
+                    color: { value: '{light-color-scheme.warning.palette.value.200.value}' }
+                },
+                error: {
+                    background: { value: '{light-color-scheme.error.palette.value.800.value}' },
+                    border: { value: '{light-color-scheme.error.palette.value.600.value}' },
+                    color: { value: '{light-color-scheme.error.palette.value.200.value}' }
+                }
+            },
+            solid: {
+                primary: {
+                    background: { value: '{light-color-scheme.primary.palette.value.560.value}' },
+                    border: { value: '{light-color-scheme.primary.palette.value.560.value}' },
+                    color: { value: 'white' },
+                },
+                info: {
+                    background: { value: '{light-color-scheme.info.palette.value.560.value}' },
+                    border: { value: '{light-color-scheme.info.palette.value.560.value}' },
+                    color: { value: 'white' }
+                },
+                success: {
+                    background: { value: '{light-color-scheme.success.palette.value.560.value}' },
+                    border: { value: '{light-color-scheme.success.palette.value.560.value}' },
+                    color: { value: 'white' }
+                },
+                warning: {
+                    background: { value: '{light-color-scheme.warning.palette.value.560.value}' },
+                    border: { value: '{light-color-scheme.warning.palette.value.560.value}' },
+                    color: { value: 'white' }
+                },
+                error: {
+                    background: { value: '{light-color-scheme.error.palette.value.560.value}' },
+                    border: { value: '{light-color-scheme.error.palette.value.560.value}' },
+                    color: { value: 'white' }
+                },
+                transparent: {
+                    background: { value: 'transparent' },
+                    border: { value: '{light-color-scheme.second.palette.value.560.value}' },
+                    color: { value: 'white' },
+                },
+                light: {
+                    background: { value: '{light-color-scheme.second.palette.value.400.value}' },
+                    border: { value: '{light-color-scheme.second.palette.value.400.value}' },
+                    color: { value: 'white' }
+                },
+                second: {
+                    background: { value: '{light-color-scheme.second.palette.value.560.value}' },
+                    border: { value: '{light-color-scheme.second.palette.value.560.value}' },
+                    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'}
+            }
+        }
+    }
+}