@vkontakte/vkui-tokens 4.35.2-dev-cfbf64.0 → 4.37.0

package/themeDescriptions/base/vk.js

@@ -10,10 +10,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.darkTheme = exports.lightTheme = exports.darkElevation = exports.darkGradient = exports.darkColors = exports.lightElevation = exports.lightGradient = exports.lightColors = void 0;
+exports.darkTheme = exports.lightTheme = exports.darkElevation = exports.darkGradient = exports.darkColors = exports.lightElevation = exports.lightGradient = exports.lightColors = exports.colorFromFigma = void 0;
 var getGradientPointsFromColor_1 = require("../../build/helpers/getGradientPointsFromColor");
 var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
+var vk_json_1 = __importDefault(require("./figma/vk.json"));
 var fontFamilyFallbacks = '-apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif';
 var fontFamilyAccent = fontFamilyFallbacks;
 var fontFamilyBase = fontFamilyFallbacks;
@@ -25,130 +29,190 @@ var fontWeightBase2 = 500;
 var fontWeightBase3 = 400;
 var colorBackgroundTertiaryLight = '#F9F9F9';
 var colorBackgroundTertiaryDark = '#202021';
-exports.lightColors = {
-    colorsScheme: 'light',
-    colors: {
-        // Background
-        colorBackgroundAccent: '#2688EB',
-        colorBackgroundAccentThemed: '#2688EB',
-        colorBackgroundAccentTint: '#5a9eff',
-        colorBackgroundAccentAlternative: '#2688EB',
-        colorBackground: '#EBEDF0',
-        colorBackgroundContent: '#FFFFFF',
-        colorBackgroundSecondary: '#F5F5F5',
-        colorBackgroundSecondaryAlpha: {
-            normal: 'rgba(0, 0, 0, 0.04)',
-            hover: 'rgba(0, 0, 0, 0.08)',
-            active: 'rgba(0, 0, 0, 0.12)',
-        },
-        colorBackgroundTertiary: colorBackgroundTertiaryLight,
-        colorBackgroundTertiaryAlpha: {
-            normal: 'rgba(0, 0, 0, 0.03)',
-            hover: 'rgba(0, 0, 0, 0.07)',
-            active: 'rgba(0, 0, 0, 0.11)',
-        },
-        colorBackgroundContrast: '#FFFFFF',
-        colorBackgroundContrastSecondaryAlpha: {
-            normal: 'rgba(255, 255, 255, 0.2)',
-            hover: 'rgba(255, 255, 255, 0.24)',
-            active: 'rgba(255, 255, 255, 0.28)',
+// eslint-disable-next-line max-lines-per-function
+var colorFromFigma = function (colorsScheme) {
+    var _a = vk_json_1.default[colorsScheme], background = _a.background, text = _a.text, icons = _a.icons, stroke = _a.stroke, palette = _a.palette, other = _a.other;
+    var states = vk_json_1.default.light.states;
+    return {
+        colorsScheme: colorsScheme,
+        colors: {
+            // Background
+            colorBackgroundAccent: background.background_accent,
+            colorBackgroundAccentThemed: background.background_accent_themed,
+            colorBackgroundAccentTint: background.background_accent_tint,
+            colorBackgroundAccentAlternative: {
+                light: '#2688EB',
+                dark: '#529EF4',
+            }[colorsScheme],
+            colorBackground: background.background,
+            colorBackgroundContent: background.background_content,
+            colorBackgroundSecondary: background.background_secondary,
+            colorBackgroundSecondaryAlpha: {
+                light: {
+                    normal: background.background_secondary_alpha,
+                    hover: states.background_secondary_alpha.hover,
+                    active: states.background_secondary_alpha.active,
+                },
+                dark: {
+                    normal: 'rgba(255, 255, 255, 0.10)',
+                    hover: 'rgba(255, 255, 255, 0.12)',
+                    active: 'rgba(255, 255, 255, 0.14)',
+                },
+            }[colorsScheme],
+            colorBackgroundTertiary: background.background_tertiary,
+            colorBackgroundTertiaryAlpha: {
+                light: {
+                    normal: background.background_tertiary_alpha,
+                    hover: 'rgba(0, 0, 0, 0.07)',
+                    active: 'rgba(0, 0, 0, 0.11)',
+                },
+                dark: {
+                    normal: 'rgba(255, 255, 255, 0.03)',
+                    hover: 'rgba(255, 255, 255, 0.07)',
+                    active: 'rgba(255, 255, 255, 0.11)',
+                },
+            }[colorsScheme],
+            colorBackgroundContrast: background.background_contrast,
+            colorBackgroundContrastSecondaryAlpha: {
+                light: {
+                    normal: background.background_contrast_secondary_alpha,
+                    hover: states.background_contrast_secondary_alpha.hover,
+                    active: states.background_contrast_secondary_alpha.active,
+                },
+                dark: {
+                    normal: 'rgba(255, 255, 255, 0.2)',
+                    hover: 'rgba(255, 255, 255, 0.24)',
+                    active: 'rgba(255, 255, 255, 0.28)',
+                },
+            }[colorsScheme],
+            colorBackgroundContrastInverse: background.background_contrast_inverse,
+            colorBackgroundModal: background.background_modal,
+            colorBackgroundModalInverse: background.background_modal_inverse,
+            colorBackgroundWarning: background.background_warning,
+            colorBackgroundPositive: background.background_positive,
+            colorBackgroundNegative: background.background_negative,
+            colorBackgroundNegativeTint: background.background_negative_tint,
+            colorBackgroundPositiveTint: background.background_positive_tint,
+            colorFieldBackground: background.field_background,
+            colorHeaderBackground: background.header_background,
+            // Text
+            colorTextAccent: text.text_accent,
+            colorTextAccentThemed: text.text_accent_themed,
+            colorTextPrimary: text.text_primary,
+            colorTextPrimaryInvariably: text.text_primary_invariably,
+            colorTextSecondary: text.text_secondary,
+            colorTextSubhead: text.text_subhead,
+            colorTextTertiary: text.text_tertiary,
+            colorTextContrast: text.text_contrast,
+            colorTextContrastThemed: text.text_contrast_themed,
+            colorTextPositive: text.text_positive,
+            colorTextNegative: text.text_negative,
+            colorTextLink: text.text_link,
+            colorTextLinkThemed: text.text_link_themed,
+            colorTextLinkTint: text.text_link_tint,
+            colorTextLinkVisited: text.text_link_visited,
+            colorTextMuted: text.text_muted,
+            colorLinkContrast: text.link_contrast,
+            colorTextButton: {
+                light: '#2688eb',
+                dark: '#ffffff',
+            }[colorsScheme],
+            // Icons
+            colorIconAccent: icons.icon_accent,
+            colorIconAccentThemed: icons.icon_accent_themed,
+            colorIconPrimary: icons.icon_primary,
+            colorIconPrimaryInvariably: icons.icon_primary_invariably,
+            colorIconMedium: icons.icon_medium,
+            colorIconMediumAlpha: icons.icon_medium_alpha,
+            colorIconSecondary: icons.icon_secondary,
+            colorIconSecondaryAlpha: icons.icon_secondary_alpha,
+            colorIconTertiary: icons.icon_tertiary,
+            colorIconTertiaryAlpha: icons.icon_tertiary_alpha,
+            colorIconContrast: icons.icon_contrast,
+            colorIconContrastThemed: icons.icon_contrast_themed,
+            colorIconContrastSecondary: icons.icon_contrast_secondary,
+            colorIconPositive: icons.icon_positive,
+            colorIconNegative: icons.icon_negative,
+            colorIconButton: {
+                light: '#2688eb',
+                dark: '#ffffff',
+            }[colorsScheme],
+            // Stroke
+            colorStrokeAccent: stroke.stroke_accent,
+            colorStrokeAccentThemed: stroke.stroke_accent_themed,
+            colorSeparatorPrimary: stroke.separator_primary,
+            colorSeparatorPrimary2x: {
+                light: '#cbcccd',
+                dark: '#444546',
+            }[colorsScheme],
+            colorSeparatorPrimary3x: {
+                light: '#bebfc1',
+                dark: '#505253',
+            }[colorsScheme],
+            colorSeparatorPrimaryAlpha: stroke.separator_primary_alpha,
+            colorSeparatorSecondary: stroke.separator_secondary,
+            colorStrokePositive: stroke.stroke_positive,
+            colorStrokeNegative: stroke.stroke_negative,
+            colorStrokeContrast: stroke.stroke_contrast,
+            colorImageBorderAlpha: stroke.image_border_alpha,
+            colorFieldBorderAlpha: {
+                light: {
+                    normal: 'rgba(0, 0, 0, 0.12)',
+                    hover: 'rgba(0, 0, 0, 0.24)',
+                    active: 'rgba(0, 0, 0, 0.36)',
+                },
+                dark: 'rgba(255, 255, 255, 0.12)',
+            }[colorsScheme],
+            colorStrokeButton: {
+                light: '#2688eb',
+                dark: '#ffffff',
+            }[colorsScheme],
+            // Palette
+            colorAccentBlue: palette.accent_blue,
+            colorAccentGray: palette.accent_gray,
+            colorAccentRed: palette.accent_red,
+            colorAccentGreen: palette.accent_green,
+            colorAccentOrange: palette.accent_orange,
+            colorAccentOrangeFire: palette.accent_orange_fire,
+            colorAccentPurple: palette.accent_purple,
+            colorAccentViolet: palette.accent_violet,
+            colorAccentRaspberryPink: palette.raspberry_pink,
+            colorAccentSecondary: palette.accent_secondary,
+            // Other
+            colorOverlayPrimary: other.overlay_primary,
+            colorOverlaySecondary: {
+                light: 'rgb(44, 45, 46, 0.5)',
+                dark: 'rgb(55, 56, 57, 0.5)',
+            }[colorsScheme],
+            colorAvatarOverlay: other.avatar_overlay_alpha,
+            colorAvatarOverlayInverseAlpha: other.avatar_overlay_inverse_alpha,
+            colorActionSheetText: other.action_sheet_text,
+            colorImagePlaceholder: other.image_placeholder,
+            colorImagePlaceholderAlpha: other.image_placeholder_alpha,
+            colorSkeletonFrom: other.skeleton_from,
+            colorSkeletonTo: other.skeleton_to,
+            colorWriteBarIcon: other.write_bar_icon,
+            colorWriteBarInputBackground: other.write_bar_input_background,
+            colorWriteBarInputBorder: other.write_bar_input_border,
+            colorWriteBarInputBorderAlpha: {
+                light: 'rgba(0, 0, 0, 0.08)',
+                dark: 'rgba(255, 255, 255, 0.8)',
+            }[colorsScheme],
+            colorTrackBackground: other.track_background,
+            colorTrackBuffer: other.track_buffer,
+            colorSearchFieldBackground: other.search_field_background,
+            colorPanelHeaderIcon: other.panel_header_icon,
+            colorSegmentedControl: other.segmented_control,
+            colorTabbarTextInactive: {
+                light: '#99a2ad',
+                dark: '#76787a',
+            }[colorsScheme],
+            colorTransparent: 'transparent',
         },
-        colorBackgroundContrastInverse: '#2C2D2E',
-        colorBackgroundModal: '#FFFFFF',
-        colorBackgroundModalInverse: '#2d2d2e',
-        colorBackgroundWarning: '#FFF2D6',
-        colorBackgroundPositive: '#4BB34B',
-        colorBackgroundNegative: '#E64646',
-        colorBackgroundNegativeTint: '#FAEBEB',
-        colorBackgroundPositiveTint: '#E8f9e8',
-        colorFieldBackground: '#f2f3f5',
-        colorHeaderBackground: '#FFFFFF',
-        // Text
-        colorTextAccent: '#2688EB',
-        colorTextAccentThemed: '#2688EB',
-        colorTextPrimary: '#000000',
-        colorTextPrimaryInvariably: '#000000',
-        colorTextSecondary: '#818C99',
-        colorTextSubhead: '#6D7885',
-        colorTextTertiary: '#99A2AD',
-        colorTextContrast: '#FFFFFF',
-        colorTextContrastThemed: '#FFFFFF',
-        colorTextPositive: '#4BB34B',
-        colorTextNegative: '#E64646',
-        colorTextLink: '#2D81E0',
-        colorTextLinkThemed: '#2D81E0',
-        colorTextLinkTint: '#71AAEB',
-        colorTextLinkVisited: '#4986CC',
-        colorTextMuted: '#2C2D2E',
-        colorLinkContrast: '#FFFFFF',
-        colorTextButton: '#2688EB',
-        // Icons
-        colorIconAccent: '#2688EB',
-        colorIconAccentThemed: '#2688EB',
-        colorIconPrimary: '#2C2D2E',
-        colorIconPrimaryInvariably: '#2C2D2E',
-        colorIconMedium: '#818C99',
-        colorIconMediumAlpha: 'rgba(0, 0, 0, 0.48)',
-        colorIconSecondary: '#99A2AD',
-        colorIconSecondaryAlpha: 'rgba(0, 0, 0, 0.36)',
-        colorIconTertiary: '#B8C1CC',
-        colorIconTertiaryAlpha: 'rgba(0, 0, 0, 0.24)',
-        colorIconContrast: '#FFFFFF',
-        colorIconContrastThemed: '#FFFFFF',
-        colorIconContrastSecondary: '#F2F3F5',
-        colorIconPositive: '#4BB34B',
-        colorIconNegative: '#E64646',
-        colorIconButton: '#2688EB',
-        // Stroke
-        colorStrokeAccent: '#2688EB',
-        colorStrokeAccentThemed: '#2688EB',
-        colorSeparatorPrimary: '#D7D8D9',
-        colorSeparatorPrimary2x: '#cbcccd',
-        colorSeparatorPrimary3x: '#bebfc1',
-        colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.12)',
-        colorSeparatorSecondary: '#E1E3E6',
-        colorStrokePositive: '#4BB34B',
-        colorStrokeNegative: '#E64646',
-        colorStrokeContrast: '#FFFFFF',
-        colorImageBorderAlpha: 'rgba(0, 0, 0, 0.08)',
-        colorFieldBorderAlpha: {
-            normal: 'rgba(0, 0, 0, 0.12)',
-            hover: 'rgba(0, 0, 0, 0.24)',
-            active: 'rgba(0, 0, 0, 0.36)',
-        },
-        colorStrokeButton: '#2688EB',
-        // Palette
-        colorAccentBlue: '#3F8AE0',
-        colorAccentGray: '#A3ADB8',
-        colorAccentRed: '#FF3347',
-        colorAccentGreen: '#4BB34B',
-        colorAccentOrange: '#FFA000',
-        colorAccentOrangeFire: '#F05C44',
-        colorAccentPurple: '#735CE6',
-        colorAccentViolet: '#792EC0',
-        colorAccentRaspberryPink: '#E03FAB',
-        colorAccentSecondary: '#3F8AE0',
-        // Other
-        colorOverlayPrimary: 'rgba(0, 0, 0, 0.4)',
-        colorAvatarOverlay: 'rgba(0, 0, 0, 0.6)',
-        colorAvatarOverlayInverseAlpha: 'rgba(255, 255, 255, 0.85)',
-        colorActionSheetText: '#3F8AE0',
-        colorImagePlaceholder: '#F2F3F5',
-        colorImagePlaceholderAlpha: 'rgba(0, 28, 61, 0.08)',
-        colorSkeletonFrom: '#F5F5F5',
-        colorSkeletonTo: '#E1E3E6',
-        colorWriteBarIcon: '#3F8AE0',
-        colorWriteBarInputBackground: '#F2F3F5',
-        colorWriteBarInputBorder: '#E1E3E6',
-        colorWriteBarInputBorderAlpha: 'rgba(0, 0, 0, 0.08)',
-        colorTrackBackground: '#E1E3E6',
-        colorTrackBuffer: '#A0BFE4',
-        colorSearchFieldBackground: '#EBEDF0',
-        colorPanelHeaderIcon: '#2688EB',
-        colorSegmentedControl: '#FFFFFF',
-        colorTransparent: 'transparent',
-    },
+    };
 };
+exports.colorFromFigma = colorFromFigma;
+exports.lightColors = (0, exports.colorFromFigma)('light');
 exports.lightGradient = {
     gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4),
     gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'),
@@ -161,126 +225,7 @@ exports.lightElevation = {
     elevation3: '0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08)',
     elevation4: '0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)',
 };
-exports.darkColors = {
-    colorsScheme: 'dark',
-    colors: {
-        // Background
-        colorBackgroundAccent: '#529EF4',
-        colorBackgroundAccentThemed: '#FFFFFF',
-        colorBackgroundAccentTint: '#5a9eff',
-        colorBackgroundAccentAlternative: '#529EF4',
-        colorBackground: '#0A0A0A',
-        colorBackgroundContent: '#19191A',
-        colorBackgroundSecondary: '#232324',
-        colorBackgroundSecondaryAlpha: {
-            normal: 'rgba(255, 255, 255, 0.10)',
-            hover: 'rgba(255, 255, 255, 0.12)',
-            active: 'rgba(255, 255, 255, 0.14)',
-        },
-        colorBackgroundTertiary: colorBackgroundTertiaryDark,
-        colorBackgroundTertiaryAlpha: {
-            normal: 'rgba(255, 255, 255, 0.03)',
-            hover: 'rgba(255, 255, 255, 0.07)',
-            active: 'rgba(255, 255, 255, 0.11)',
-        },
-        colorBackgroundContrast: '#FFFFFF',
-        colorBackgroundContrastSecondaryAlpha: {
-            normal: 'rgba(255, 255, 255, 0.2)',
-            hover: 'rgba(255, 255, 255, 0.24)',
-            active: 'rgba(255, 255, 255, 0.28)',
-        },
-        colorBackgroundContrastInverse: '#2C2D2E',
-        colorBackgroundModal: '#2C2D2E',
-        colorBackgroundModalInverse: '#ffffff',
-        colorBackgroundWarning: '#857250',
-        colorBackgroundPositive: '#4BB34B',
-        colorBackgroundNegative: '#FF5C5C',
-        colorBackgroundNegativeTint: '#522E2E',
-        colorBackgroundPositiveTint: '#E8f9e8',
-        colorFieldBackground: '#232324',
-        colorHeaderBackground: '#19191A',
-        // Text
-        colorTextAccent: '#529EF4',
-        colorTextAccentThemed: '#FFFFFF',
-        colorTextPrimary: '#E1E3E6',
-        colorTextPrimaryInvariably: '#000000',
-        colorTextSecondary: '#76787A',
-        colorTextSubhead: '#969A9F',
-        colorTextTertiary: '#5D5F61',
-        colorTextContrast: '#FFFFFF',
-        colorTextContrastThemed: '#000000',
-        colorTextPositive: '#4BB34B',
-        colorTextNegative: '#FF5C5C',
-        colorTextLink: '#529EF4',
-        colorTextLinkThemed: '#FFFFFF',
-        colorTextLinkTint: '#71AAEB',
-        colorTextLinkVisited: '#4986CC',
-        colorTextMuted: '#E1E3E6',
-        colorLinkContrast: '#FFFFFF',
-        colorTextButton: '#FFFFFF',
-        // Icons
-        colorIconAccent: '#529EF4',
-        colorIconAccentThemed: '#FFFFFF',
-        colorIconPrimary: '#E1E3E6',
-        colorIconPrimaryInvariably: '#2C2D2E',
-        colorIconMedium: '#B0B1B6',
-        colorIconMediumAlpha: 'rgba(241, 247, 255, 0.66)',
-        colorIconSecondary: '#76787A',
-        colorIconSecondaryAlpha: 'rgba(0, 0, 0, 0.43)',
-        colorIconTertiary: '#5D5F61',
-        colorIconTertiaryAlpha: 'rgba(255, 255, 255, 0.3)',
-        colorIconContrast: '#FFFFFF',
-        colorIconContrastThemed: '#000000',
-        colorIconContrastSecondary: '#F2F3F5',
-        colorIconPositive: '#4BB34B',
-        colorIconNegative: '#FF5C5C',
-        colorIconButton: '#FFFFFF',
-        // Stroke
-        colorStrokeAccent: '#529EF4',
-        colorStrokeAccentThemed: '#FFFFFF',
-        colorSeparatorPrimary: '#363738',
-        colorSeparatorPrimary2x: '#444546',
-        colorSeparatorPrimary3x: '#505253',
-        colorSeparatorPrimaryAlpha: 'rgba(255, 255, 255, 0.12)',
-        colorSeparatorSecondary: '#141415',
-        colorStrokePositive: '#4BB34B',
-        colorStrokeNegative: '#FF5C5C',
-        colorStrokeContrast: '#FFFFFF',
-        colorImageBorderAlpha: 'rgba(255, 255, 255, 0.08)',
-        colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.12)',
-        colorStrokeButton: '#FFFFFF',
-        // Palette
-        colorAccentBlue: '#529EF4',
-        colorAccentGray: '#A3ADB8',
-        colorAccentRed: '#FF3347',
-        colorAccentGreen: '#4BB34B',
-        colorAccentOrange: '#FFA000',
-        colorAccentOrangeFire: '#F05C44',
-        colorAccentPurple: '#735CE6',
-        colorAccentViolet: '#792EC0',
-        colorAccentRaspberryPink: '#F060C0',
-        colorAccentSecondary: '#3F8AE0',
-        // Other
-        colorOverlayPrimary: 'rgba(0, 0, 0, 0.4)',
-        colorAvatarOverlay: 'rgba(0, 0, 0, 0.6)',
-        colorAvatarOverlayInverseAlpha: 'rgba(255, 255, 255, 0.85)',
-        colorImagePlaceholder: '#2A2B2C',
-        colorImagePlaceholderAlpha: 'rgba(241, 247, 255, 0.08)',
-        colorSkeletonFrom: '#232324',
-        colorSkeletonTo: '#2C2D2E',
-        colorWriteBarIcon: '#529EF4',
-        colorWriteBarInputBackground: '#2C2D2E',
-        colorWriteBarInputBorder: '#2C2D2E',
-        colorWriteBarInputBorderAlpha: 'rgba(255, 255, 255, 0.8)',
-        colorActionSheetText: '#529EF4',
-        colorTrackBackground: '#454647',
-        colorTrackBuffer: '#405772',
-        colorSearchFieldBackground: '#363738',
-        colorPanelHeaderIcon: '#71AAEB',
-        colorSegmentedControl: '#626364',
-        colorTransparent: 'transparent',
-    },
-};
+exports.darkColors = (0, exports.colorFromFigma)('dark');
 exports.darkGradient = {
     gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4),
     gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'),
@@ -443,6 +388,8 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: 16,
     }, sizeBorderRadius: {
         regular: 8,
+    }, sizeBorderRadiusRounded: {
+        regular: 48,
     }, sizeCheckBorderRadius: {
         regular: 4,
     }, sizeBorderRadiusPaper: {
@@ -471,7 +418,7 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
     }, sizeArrowPromo: {
         regular: 40,
     }, sizePopupSmall: {
-        regular: 420,
+        regular: 430,
     }, sizePopupMedium: {
         regular: 680,
     }, sizePopupLarge: {

package/themes/calendar/cssVars/declarations/index.css

@@ -159,6 +159,7 @@
 	--vkui--size_popup_header_padding--compact: 24px;
 	--vkui--size_border_radius--compact: 8px;
 	--vkui--size_border_radius--regular: 8px;
+	--vkui--size_border_radius_rounded--regular: 48px;
 	--vkui--size_check_border_radius--regular: 4px;
 	--vkui--size_border_radius_paper--regular: 12px;
 	--vkui--size_border_radius_promo--regular: 20px;
@@ -175,7 +176,7 @@
 	--vkui--size_checkbox--regular: 16px;
 	--vkui--size_arrow--regular: 8px;
 	--vkui--size_arrow_promo--regular: 40px;
-	--vkui--size_popup_small--regular: 420px;
+	--vkui--size_popup_small--regular: 430px;
 	--vkui--size_popup_medium--regular: 680px;
 	--vkui--size_popup_large--regular: 880px;
 	--vkui--size_field_horizontal_padding--regular: 8px;
@@ -669,9 +670,15 @@
 	--vkui--color_overlay_primary: rgba(0, 0, 0, 0.48);
 	--vkui--color_overlay_primary--hover: rgba(0, 0, 0, 0.52);
 	--vkui--color_overlay_primary--active: rgba(0, 0, 0, 0.56);
+	--vkui--color_overlay_secondary: rgb(44, 45, 46, 0.5);
+	--vkui--color_overlay_secondary--hover: rgba(44, 45, 46, 0.54);
+	--vkui--color_overlay_secondary--active: rgba(44, 45, 46, 0.58);
 	--vkui--color_segmented_control: #FFFFFF;
 	--vkui--color_segmented_control--hover: #F5F5F7;
 	--vkui--color_segmented_control--active: #EBECEF;
+	--vkui--color_tabbar_text_inactive: #99A2AD;
+	--vkui--color_tabbar_text_inactive--hover: #939CA9;
+	--vkui--color_tabbar_text_inactive--active: #8D96A4;
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(0, 16, 61, 0.04);
 	--vkui--color_transparent--active: rgba(0, 16, 61, 0.08);
@@ -1745,6 +1752,7 @@
 	--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);
 	--vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--regular);
 	--vkui--size_border_radius: var(--vkui--size_border_radius--regular);
+	--vkui--size_border_radius_rounded: 48px;
 	--vkui--size_check_border_radius: 4px;
 	--vkui--size_border_radius_paper: 12px;
 	--vkui--size_border_radius_promo: 20px;
@@ -1756,7 +1764,7 @@
 	--vkui--size_checkbox: 16px;
 	--vkui--size_arrow: 8px;
 	--vkui--size_arrow_promo: 40px;
-	--vkui--size_popup_small: 420px;
+	--vkui--size_popup_small: 430px;
 	--vkui--size_popup_medium: 680px;
 	--vkui--size_popup_large: 880px;
 	--vkui--size_field_horizontal_padding: 8px;

package/themes/calendar/cssVars/declarations/noColors.css

@@ -159,6 +159,7 @@
 	--vkui--size_popup_header_padding--compact: 24px;
 	--vkui--size_border_radius--compact: 8px;
 	--vkui--size_border_radius--regular: 8px;
+	--vkui--size_border_radius_rounded--regular: 48px;
 	--vkui--size_check_border_radius--regular: 4px;
 	--vkui--size_border_radius_paper--regular: 12px;
 	--vkui--size_border_radius_promo--regular: 20px;
@@ -175,7 +176,7 @@
 	--vkui--size_checkbox--regular: 16px;
 	--vkui--size_arrow--regular: 8px;
 	--vkui--size_arrow_promo--regular: 40px;
-	--vkui--size_popup_small--regular: 420px;
+	--vkui--size_popup_small--regular: 430px;
 	--vkui--size_popup_medium--regular: 680px;
 	--vkui--size_popup_large--regular: 880px;
 	--vkui--size_field_horizontal_padding--regular: 8px;

package/themes/calendar/cssVars/declarations/noSizes.css

@@ -321,9 +321,15 @@
 	--vkui--color_overlay_primary: rgba(0, 0, 0, 0.48);
 	--vkui--color_overlay_primary--hover: rgba(0, 0, 0, 0.52);
 	--vkui--color_overlay_primary--active: rgba(0, 0, 0, 0.56);
+	--vkui--color_overlay_secondary: rgb(44, 45, 46, 0.5);
+	--vkui--color_overlay_secondary--hover: rgba(44, 45, 46, 0.54);
+	--vkui--color_overlay_secondary--active: rgba(44, 45, 46, 0.58);
 	--vkui--color_segmented_control: #FFFFFF;
 	--vkui--color_segmented_control--hover: #F5F5F7;
 	--vkui--color_segmented_control--active: #EBECEF;
+	--vkui--color_tabbar_text_inactive: #99A2AD;
+	--vkui--color_tabbar_text_inactive--hover: #939CA9;
+	--vkui--color_tabbar_text_inactive--active: #8D96A4;
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(0, 16, 61, 0.04);
 	--vkui--color_transparent--active: rgba(0, 16, 61, 0.08);

package/themes/calendar/cssVars/declarations/onlyColors.css

@@ -284,9 +284,15 @@
 	--vkui--color_overlay_primary: rgba(0, 0, 0, 0.48);
 	--vkui--color_overlay_primary--hover: rgba(0, 0, 0, 0.52);
 	--vkui--color_overlay_primary--active: rgba(0, 0, 0, 0.56);
+	--vkui--color_overlay_secondary: rgb(44, 45, 46, 0.5);
+	--vkui--color_overlay_secondary--hover: rgba(44, 45, 46, 0.54);
+	--vkui--color_overlay_secondary--active: rgba(44, 45, 46, 0.58);
 	--vkui--color_segmented_control: #FFFFFF;
 	--vkui--color_segmented_control--hover: #F5F5F7;
 	--vkui--color_segmented_control--active: #EBECEF;
+	--vkui--color_tabbar_text_inactive: #99A2AD;
+	--vkui--color_tabbar_text_inactive--hover: #939CA9;
+	--vkui--color_tabbar_text_inactive--active: #8D96A4;
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(0, 16, 61, 0.04);
 	--vkui--color_transparent--active: rgba(0, 16, 61, 0.08);