@ptsecurity/mosaic 13.0.0 → 13.1.0

package/core/formatters/date/formatter.d.ts

@@ -37,7 +37,8 @@ export interface FormatterRelativeTemplate {
     TOMORROW: string;
     AFTER_TOMORROW: string;
 }
-export interface AbsoluteDateTimeOptions {
+export interface DateTimeOptions {
+    seconds?: boolean;
     milliseconds?: boolean;
 }
 export interface FormatterConfig {
@@ -73,7 +74,7 @@ export declare class DateFormatter<D> {
      * @param template - template
      * @returns relative date by template
      */
-    relativeDate(date: D, template: FormatterRelativeTemplate): string;
+    relativeDate(date: D, template: FormatterRelativeTemplate, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param date - date
      * @returns relative date in short format
@@ -84,14 +85,27 @@ export declare class DateFormatter<D> {
      * @returns relative date in long format
      */
     relativeLongDate(date: D): string;
+    /**
+     * @param date - date
+     * @param options - DateTimeOptions
+     * @returns relative date in short format with time
+     */
+    relativeShortDateTime(date: D, options?: DateTimeOptions): string;
+    /**
+     * @param date - date
+     * @param options - DateTimeOptions
+     * @returns relative date in long format with time
+     */
+    relativeLongDateTime(date: D, options?: DateTimeOptions): string;
     /**
      * @param date - date
      * @param params - parameters
      * @param datetime - should time be shown as well
+     * @param seconds - should time with seconds be shown as well
      * @param milliseconds - should time with milliseconds be shown as well
      * @returns absolute date in common format
      */
-    absoluteDate(date: D, params: FormatterAbsoluteTemplate, datetime?: boolean, milliseconds?: boolean): string;
+    absoluteDate(date: D, params: FormatterAbsoluteTemplate, datetime?: boolean, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param date - date
      * @returns absolute date in short format
@@ -99,10 +113,10 @@ export declare class DateFormatter<D> {
     absoluteShortDate(date: D): string;
     /**
      * @param date - date
-     * @param options - AbsoluteDateTimeOptions
+     * @param options - DateTimeOptions
      * @returns absolute date in short format with time
      */
-    absoluteShortDateTime(date: D, options?: AbsoluteDateTimeOptions): string;
+    absoluteShortDateTime(date: D, options?: DateTimeOptions): string;
     /**
      * @param date - date
      * @returns absolute date in long format
@@ -110,10 +124,10 @@ export declare class DateFormatter<D> {
     absoluteLongDate(date: D): string;
     /**
      * @param date - date
-     * @param options - AbsoluteDateTimeOptions
+     * @param options - DateTimeOptions
      * @returns absolute date in long format with time
      */
-    absoluteLongDateTime(date: D, options?: AbsoluteDateTimeOptions): string;
+    absoluteLongDateTime(date: D, options?: DateTimeOptions): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
@@ -125,9 +139,11 @@ export declare class DateFormatter<D> {
      * @param startDate - start date
      * @param endDate - end date
      * @param template - template
+     * @param seconds - should time with seconds be shown as well
+     * @param milliseconds - should time with milliseconds be shown as well
      * @returns opened date
      */
-    openedRangeDateTime(startDate: D | null, endDate: D | null, template: FormatterRangeTemplate): string;
+    openedRangeDateTime(startDate: D | null, endDate: D | null, template: FormatterRangeTemplate, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
@@ -141,7 +157,7 @@ export declare class DateFormatter<D> {
      * @param template - template
      * @returns range date in template format with time
      */
-    rangeDateTime(startDate: D, endDate: D, template: FormatterRangeTemplate): string;
+    rangeDateTime(startDate: D, endDate: D, template: FormatterRangeTemplate, seconds?: boolean, milliseconds?: boolean): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
@@ -151,28 +167,36 @@ export declare class DateFormatter<D> {
     /**
      * @param startDate - start date
      * @param endDate - end date
+     * @param options - DateTimeOptions
      * @returns range date in short format with time
      */
-    rangeShortDateTime(startDate: D | null, endDate?: D): string;
+    rangeShortDateTime(startDate: D | null, endDate?: D | null, options?: DateTimeOptions): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
      * @returns range date in long format
      */
-    rangeLongDate(startDate: D | null, endDate?: D): string;
+    rangeLongDate(startDate: D | null, endDate?: D | null): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
+     * @param options - DateTimeOptions
      * @returns range date in long format with time
      */
-    rangeLongDateTime(startDate: D | null, endDate?: D): string;
+    rangeLongDateTime(startDate: D | null, endDate?: D, options?: DateTimeOptions): string;
     /**
      * @param startDate - start date
      * @param endDate - end date
+     * @param options - DateTimeOptions
      * @returns range middle date with time
      */
-    rangeMiddleDateTime(startDate: D, endDate: D): string;
+    rangeMiddleDateTime(startDate: D, endDate: D, options?: DateTimeOptions): string;
     private compileVariables;
+    private isBeforeYesterday;
+    private isYesterday;
+    private isToday;
+    private isTomorrow;
+    private isAfterTomorrow;
     private hasSame;
     static ɵfac: i0.ɵɵFactoryDeclaration<DateFormatter<any>, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DateFormatter<any>>;

package/core/public-api.d.ts

@@ -1,3 +1,4 @@
+export * from './version';
 export * from './utils/index';
 export * from './common-behaviors/index';
 export * from './line/line';

package/core/version.d.ts

@@ -0,0 +1,2 @@
+import { Version } from '@angular/core';
+export declare const VERSION: Version;

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

@@ -9,7 +9,7 @@
                 },
                 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}' }
+                    shadow: { value: '0 0 0 1px {light-color-scheme.primary.palette.value.600.value}' }
                 }
             }
         },
@@ -22,7 +22,7 @@
                 },
                 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}' }
+                    shadow: { value: '0 0 0 1px {dark-color-scheme.primary.palette.value.400.value}' }
                 }
             }
         },

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

@@ -36,6 +36,12 @@
         }
     },
     'modal-header': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.divider.value}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider.value}' }
+        },
         size: {
             'border-radius': { value: '4px 4px 0 0' },
             padding: { value: '14px 16px' }
@@ -54,6 +60,12 @@
         }
     },
     'modal-footer': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.foreground.divider.value}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{dark-color-scheme.foreground.divider.value}' }
+        },
         size: {
             'border-radius': { value: '0 0 4px 4px' },
             padding: { value: '16px {padding.headerFooter-horizontal}' }

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

@@ -33,6 +33,7 @@
 
             states: {
                 active: { value: 'rgba(0, 0, 0, 0.1)' },
+                selected: { value: '{light-color-scheme.second.palette.value.700.value}' },
                 hover: { value: 'rgba(255, 255, 255, 0.1)' },
                 progress: { value: '{light-color-scheme.primary.palette.value.800.value}' },
                 'disabled-opacity': { value: 0.3 }
@@ -44,6 +45,7 @@
 
             states: {
                 active: { value: 'rgba(0, 0, 0, 0.1)' },
+                selected: { value: '{dark-color-scheme.second.palette.value.600.value}' },
                 hover: { value: 'rgba(255, 255, 255, 0.1)' },
                 progress: { value: '{dark-color-scheme.primary.palette.value.800.value}' },
                 'disabled-opacity': { value: 0.3 }

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

@@ -8,7 +8,6 @@
                 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}' },

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

@@ -4,6 +4,7 @@
             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: {
@@ -19,6 +20,7 @@
             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: {
@@ -34,6 +36,7 @@
             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: {
@@ -51,6 +54,7 @@
             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: {
@@ -66,6 +70,7 @@
             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: {
@@ -81,6 +86,7 @@
             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: {

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.d.ts → legacy-2017/tokens.d.ts}

@@ -7232,12 +7232,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";
@@ -7365,12 +7365,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 +7390,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;
@@ -7511,6 +7517,7 @@ export declare const TabsSizeLabelIconMargin = "8px";
 export declare const TabsFontDefault = "body";
 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 +7525,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 +7533,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 +7541,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 +7549,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 +7557,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 +7587,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' }
+            }
+        }
+    }
+}