@vkontakte/vkui-tokens 4.29.4 → 4.30.1-dev-ff0eeb.0

package/build/helpers/appearance.d.ts

@@ -0,0 +1,5 @@
+export interface ClusterData {
+    color_identifier: string;
+    alpha_multiplier?: number;
+}
+export declare function resolveColor(clusterData: ClusterData, palette?: Record<string, string>): string;

package/build/helpers/appearance.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveColor = void 0;
+var palette_json_1 = __importDefault(require("@vkontakte/appearance/main.valette/palette.json"));
+/* eslint-enable @typescript-eslint/naming-convention */
+function resolveColor(clusterData, palette) {
+    if (palette === void 0) { palette = palette_json_1.default; }
+    var color = palette[clusterData.color_identifier];
+    var alphaMultiplier = clusterData.alpha_multiplier ? Number(clusterData.alpha_multiplier) : 1;
+    if (!color) {
+        throw new Error("Missing color: ".concat(clusterData.color_identifier));
+    }
+    else if (color.indexOf('#') === 0 && color.length === 9) {
+        // ahex
+        return ahex2rgba(color.replace('#', ''), alphaMultiplier);
+    }
+    else if (color.indexOf('#') === 0 && clusterData.alpha_multiplier) {
+        return opacify(color.replace('#', ''), alphaMultiplier);
+    }
+    return color;
+}
+exports.resolveColor = resolveColor;
+function ahex2rgba(ahex, multiplier) {
+    if (multiplier === void 0) { multiplier = 1; }
+    var opacity = (parseInt(ahex.slice(0, 2), 16) / 255) * multiplier;
+    var colorHex = ahex.slice(2);
+    return opacify(colorHex, opacity);
+}
+function opacify(hex, opacity) {
+    return "rgba(".concat(parseInt(hex.slice(0, 2), 16), ", ").concat(parseInt(hex.slice(2, 4), 16), ", ").concat(parseInt(hex.slice(4), 16), ", ").concat(opacity.toFixed(2), ")");
+}

package/build/helpers/appearance.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/helpers/appearance.test.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/naming-convention */
+var appearance_1 = require("./appearance");
+describe('vkCom/appearance', function () {
+    test('white', function () {
+        expect((0, appearance_1.resolveColor)({
+            color_identifier: 'white',
+        })).toBe('#FFFFFF');
+    });
+    test('white_alpha12', function () {
+        expect((0, appearance_1.resolveColor)({
+            color_identifier: 'white_alpha12',
+        })).toBe('rgba(255, 255, 255, 0.12)');
+    });
+    test('white with alpha_multiplier', function () {
+        expect((0, appearance_1.resolveColor)({
+            color_identifier: 'white',
+            alpha_multiplier: 0.04,
+        })).toBe('rgba(255, 255, 255, 0.04)');
+    });
+    test('missing color', function () {
+        expect(function () {
+            return (0, appearance_1.resolveColor)({
+                color_identifier: 'impossible',
+            });
+        }).toThrow();
+    });
+});

package/interfaces/namespaces/vk/index.d.ts

@@ -0,0 +1,203 @@
+import { Theme, ThemeCssVars, ThemeDescription } from '../../general';
+import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
+import { GradientPoints } from '../../general/gradients';
+import { Tokens } from '../../general/tools/tokenValue';
+export interface VkGradients {
+    /**
+     * @desc Градиент AquamarineBlue
+     * @tags gradient
+     */
+    gradientAquamarineBlue: GradientPoints;
+    /**
+     * @desc Градиент Blue
+     * @tags gradient
+     */
+    gradientBlue: GradientPoints;
+    /**
+     * @desc Градиент Candy
+     * @tags gradient
+     */
+    gradientCandy: GradientPoints;
+    /**
+     * @desc Градиент Crimson
+     * @tags gradient
+     */
+    gradientCrimson: GradientPoints;
+    /**
+     * @desc Градиент Disco
+     * @tags gradient
+     */
+    gradientDisco: GradientPoints;
+    /**
+     * @desc Градиент Emerald
+     * @tags gradient
+     */
+    gradientEmerald: GradientPoints;
+    /**
+     * @desc Градиент Gray
+     * @tags gradient
+     */
+    gradientGray: GradientPoints;
+    /**
+     * @desc Градиент Green
+     * @tags gradient
+     */
+    gradientGreen: GradientPoints;
+    /**
+     * @desc Градиент Lagoon
+     * @tags gradient
+     */
+    gradientLagoon: GradientPoints;
+    /**
+     * @desc Градиент Lavender
+     * @tags gradient
+     */
+    gradientLavender: GradientPoints;
+    /**
+     * @desc Градиент Marine
+     * @tags gradient
+     */
+    gradientMarine: GradientPoints;
+    /**
+     * @desc Градиент Midnight
+     * @tags gradient
+     */
+    gradientMidnight: GradientPoints;
+    /**
+     * @desc Градиент Orange
+     * @tags gradient
+     */
+    gradientOrange: GradientPoints;
+    /**
+     * @desc Градиент Pink
+     * @tags gradient
+     */
+    gradientPink: GradientPoints;
+    /**
+     * @desc Градиент Purple
+     * @tags gradient
+     */
+    gradientPurple: GradientPoints;
+    /**
+     * @desc Градиент RaspberryPink
+     * @tags gradient
+     */
+    gradientRaspberryPink: GradientPoints;
+    /**
+     * @desc Градиент Red
+     * @tags gradient
+     */
+    gradientRed: GradientPoints;
+    /**
+     * @desc Градиент Retrowave
+     * @tags gradient
+     */
+    gradientRetrowave: GradientPoints;
+    /**
+     * @desc Градиент Sunset
+     * @tags gradient
+     */
+    gradientSunset: GradientPoints;
+    /**
+     * @desc Градиент Turquoise
+     * @tags gradient
+     */
+    gradientTurquoise: GradientPoints;
+    /**
+     * @desc Градиент Twilight
+     * @tags gradient
+     */
+    gradientTwilight: GradientPoints;
+    /**
+     * @desc Градиент Unicorn
+     * @tags gradient
+     */
+    gradientUnicorn: GradientPoints;
+    /**
+     * @desc Градиент Violet
+     * @tags gradient
+     */
+    gradientViolet: GradientPoints;
+    /**
+     * @desc Градиент Yellow
+     * @tags gradient
+     */
+    gradientYellow: GradientPoints;
+    /**
+     * @desc Градиент YellowBright
+     * @tags gradient
+     */
+    gradientYellowBright: GradientPoints;
+    /**
+     * @desc Градиент HalloweenOrange
+     * @tags gradient
+     */
+    gradientHalloweenOrange: GradientPoints;
+    /**
+     * @desc Градиент HalloweenViolet
+     * @tags gradient
+     */
+    gradientHalloweenViolet: GradientPoints;
+    /**
+     * @desc Градиент NewYear
+     * @tags gradient
+     */
+    gradientNewYear: GradientPoints;
+    /**
+     * @desc Градиент Frost
+     * @tags gradient
+     */
+    gradientFrost: GradientPoints;
+    /**
+     * @desc Градиент Valentine
+     * @tags gradient
+     */
+    gradientValentine: GradientPoints;
+    /**
+     * @desc Градиент WarmValentine
+     * @tags gradient
+     */
+    gradientWarmValentine: GradientPoints;
+    /**
+     * @desc Градиент Sberkot
+     * @tags gradient
+     */
+    gradientSberkot: GradientPoints;
+    /**
+     * @desc Градиент Mable
+     * @tags gradient
+     */
+    gradientMable: GradientPoints;
+    /**
+     * @desc Градиент WomensDay
+     * @tags gradient
+     */
+    gradientWomensDay: GradientPoints;
+}
+export interface LocalVkColorsDescriptionStruct {
+    colorSnippetBorderAlpha: ColorDescription;
+    colorModalCardBorderAlpha: ColorDescription;
+    colorLandingSnippetBorderAlpha: ColorDescription;
+    colorActionSheetSeparatorAlpha: ColorDescription;
+    colorInputBorder: ColorDescription;
+    colorImForwardLineAlpha: ColorDescription;
+    colorImBubbleBorderAlternateHighlightedAlpha: ColorDescription;
+    colorImBubbleIncoming: ColorDescription;
+    colorImBubbleIncomingAlternate: ColorDescription;
+    colorImBubbleIncomingExpiring: ColorDescription;
+    colorImBubbleOutgoing: ColorDescription;
+    colorImBubbleOutgoingExpiringHighlighted: ColorDescription;
+    colorImBubbleGiftText: ColorDescription;
+    colorImBubbleGiftTextSecondary: ColorDescription;
+    colorImTextName: ColorDescription;
+}
+export type VkLocalColors = {
+    [key in keyof LocalVkColorsDescriptionStruct]: ColorWithStates;
+};
+export interface VkTheme extends Theme, VkGradients, VkLocalColors {
+}
+export interface VkThemeDescription extends ThemeDescription, Tokens<VkGradients> {
+    colors: LocalVkColorsDescriptionStruct & ColorsDescriptionStruct;
+}
+export interface VkThemeCssVars extends ThemeCssVars<VkTheme> {
+}

package/interfaces/namespaces/vk/index.js

@@ -1 +1,2 @@
-// место где можно оперделить локальные переменные вк, как вариант
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/interfaces/themes/calendar/index.d.ts

@@ -12,6 +12,8 @@ export interface ThemeCalendarOverValues {
     calendarSizeBorderRadiusSmall: number;
     calendarSizeBorderRadiusMedium: number;
     calendarSizeBorderRadiusLarge: number;
+    calendarImageOverlayBackground: string;
+    calendarElevationEventForm: string;
 }
 export interface LocalCalendarColorDescriptionStruct {
     calendarColorBackgroundPositiveTintAlpha4: ColorDescription;
@@ -34,6 +36,11 @@ export interface LocalCalendarColorDescriptionStruct {
     calendarColorSidebarComposeButtonIcon: ColorDescription;
     calendarColorSidebarComposeButtonText: ColorDescription;
     calendarColorSidebarScrollbar: ColorDescription;
+    calendarColorHeaderBackground: ColorDescription;
+    calendarColorHeaderSecondaryAlpha: ColorDescription;
+    calendarColorHeaderonSecondary: ColorDescription;
+    calendarColorHeaderonWidgetAlpha: ColorDescription;
+    calendarColorHeaderWidgetBackgroundAlpha: ColorDescription;
     calendarColorHeaderIcon: ColorDescription;
     calendarColorHeaderTextSecondary: ColorDescription;
     calendarColorHeaderButtonText: ColorDescription;

package/interfaces/themes/vkBase/index.d.ts

@@ -1,7 +1,7 @@
-import { Theme, ThemeCssVars, ThemeDescription } from '../../general';
-export interface ThemeVkBase extends Theme {
+import { VkTheme, VkThemeCssVars, VkThemeDescription } from '../../namespaces/vk';
+export interface ThemeVkBase extends VkTheme {
 }
-export interface ThemeVkBaseDescription extends ThemeDescription {
+export interface ThemeVkBaseDescription extends VkThemeDescription {
 }
-export interface ThemeVkBaseCssVars extends ThemeCssVars {
+export interface ThemeVkBaseCssVars extends VkThemeCssVars {
 }

package/interfaces/themes/vkBaseDark/index.d.ts

@@ -1,7 +1,7 @@
-import { Theme, ThemeCssVars, ThemeDescription } from '../../general';
-export interface ThemeVkBaseDark extends Theme {
+import { VkTheme, VkThemeCssVars, VkThemeDescription } from '../../namespaces/vk';
+export interface ThemeVkBaseDark extends VkTheme {
 }
-export interface ThemeVkBaseDarkDescription extends ThemeDescription {
+export interface ThemeVkBaseDarkDescription extends VkThemeDescription {
 }
-export interface ThemeVkBaseDarkCssVars extends ThemeCssVars {
+export interface ThemeVkBaseDarkCssVars extends VkThemeCssVars {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.29.4",
+  "version": "4.30.1-dev-ff0eeb.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -43,7 +43,7 @@
     "@types/react-dom": "18.0.10",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
-    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.51.4",
+    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.0",
     "@vkontakte/icons": "2.14.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.7.2",
@@ -59,10 +59,10 @@
     "css-loader": "6.7.3",
     "css.escape": "1.5.1",
     "eslint": "7.32.0",
-    "eslint-config-prettier": "8.5.0",
+    "eslint-config-prettier": "8.7.0",
     "eslint-config-silence": "1.0.0",
     "eslint-import-resolver-alias": "1.1.2",
-    "eslint-plugin-compat": "4.0.2",
+    "eslint-plugin-compat": "4.1.2",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jasmine": "4.1.3",
     "eslint-plugin-prettier": "4.2.1",
@@ -87,13 +87,13 @@
     "tscpaths": "0.0.9",
     "type-fest": "3.6.1",
     "typescript": "4.9.5",
-    "webpack": "5.75.0",
+    "webpack": "5.76.1",
     "webpack-cli": "5.0.1",
     "webpack-dev-server": "4.11.1",
     "webpack-notifier": "1.15.0"
   },
   "engines": {
-    "npm": "^8.5.5",
+    "npm": "^9.3.1",
     "yarn": "^1.21.1"
   }
 }

package/themeDescriptions/base/vk.d.ts

@@ -1,11 +1,16 @@
-import { ColorsDescription, ThemeDescription } from '../../interfaces/general';
+import { bright_light, space_gray } from '@vkontakte/appearance/main.valette/scheme.json';
+import { vkcom_dark, vkcom_light } from '@vkontakte/appearance/main.valette/scheme_web.json';
+import { ColorsDescription } from '../../interfaces/general';
 import { Elevation } from '../../interfaces/general/elevation';
 import { Gradients } from '../../interfaces/general/gradients';
+import { LocalVkColorsDescriptionStruct, VkGradients, VkThemeDescription } from '../../interfaces/namespaces/vk';
+export declare const vkLocalColors: (theme: typeof bright_light | typeof space_gray | typeof vkcom_light | typeof vkcom_dark, palette?: Record<string, string>) => LocalVkColorsDescriptionStruct;
 export declare const lightColors: ColorsDescription;
 export declare const lightGradient: Gradients;
 export declare const lightElevation: Elevation;
 export declare const darkColors: ColorsDescription;
 export declare const darkGradient: Gradients;
 export declare const darkElevation: Elevation;
-export declare const lightTheme: ThemeDescription;
-export declare const darkTheme: ThemeDescription;
+export declare const gradients: VkGradients;
+export declare const lightTheme: VkThemeDescription;
+export declare const darkTheme: VkThemeDescription;

package/themeDescriptions/base/vk.js

@@ -10,10 +10,38 @@ 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.gradients = exports.darkElevation = exports.darkGradient = exports.darkColors = exports.lightElevation = exports.lightGradient = exports.lightColors = exports.vkLocalColors = void 0;
+var palette_json_1 = __importDefault(require("@vkontakte/appearance/main.valette/palette.json"));
+var scheme_json_1 = require("@vkontakte/appearance/main.valette/scheme.json");
+var appearance_1 = require("../../build/helpers/appearance");
 var getGradientPointsFromColor_1 = require("../../build/helpers/getGradientPointsFromColor");
 var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
+var vkLocalColors = function (theme, palette) {
+    if (palette === void 0) { palette = palette_json_1.default; }
+    var resolve = function (clusterData) { return (0, appearance_1.resolveColor)(clusterData, palette); };
+    return {
+        colorSnippetBorderAlpha: resolve(theme.colors.snippet_border),
+        colorModalCardBorderAlpha: resolve(theme.colors.modal_card_border),
+        colorLandingSnippetBorderAlpha: resolve(theme.colors.landing_snippet_border),
+        colorActionSheetSeparatorAlpha: resolve(theme.colors.action_sheet_separator),
+        colorInputBorder: resolve(theme.colors.input_border),
+        colorImForwardLineAlpha: resolve(theme.colors.im_forward_line_tint),
+        colorImBubbleBorderAlternateHighlightedAlpha: resolve(theme.colors.im_bubble_border_alternate_highlighted),
+        colorImBubbleIncoming: resolve(theme.colors.im_bubble_incoming),
+        colorImBubbleIncomingAlternate: resolve(theme.colors.im_bubble_incoming_alternate),
+        colorImBubbleIncomingExpiring: resolve(theme.colors.im_bubble_incoming_expiring),
+        colorImBubbleOutgoing: resolve(theme.colors.im_bubble_outgoing),
+        colorImBubbleOutgoingExpiringHighlighted: resolve(theme.colors.im_bubble_outgoing_expiring_highlighted),
+        colorImBubbleGiftText: resolve(theme.colors.im_bubble_gift_text),
+        colorImBubbleGiftTextSecondary: resolve(theme.colors.im_bubble_gift_text_secondary),
+        colorImTextName: resolve(theme.colors.im_text_name),
+    };
+};
+exports.vkLocalColors = vkLocalColors;
 var fontFamilyAccent = "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif";
 var fontFamilyBase = "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif";
 var fontWeightAccent1 = 600;
@@ -279,7 +307,43 @@ exports.darkElevation = {
     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.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), exports.lightGradient), exports.lightElevation), { 
+exports.gradients = {
+    gradientAquamarineBlue: '#7DF1FA, #2BB4D6',
+    gradientBlue: '#66CCFF, #3F8AE0',
+    gradientCandy: '#FF99CC, #E52E6A',
+    gradientCrimson: '#FF7373, #E53949, #BF1C38',
+    gradientDisco: '#FFB726, #FF2693, #8122E0, #2693FF',
+    gradientEmerald: '#00D948, #0D8046',
+    gradientGray: '#C1CAD6, #878F99',
+    gradientGreen: '#6CD97E, #12B312',
+    gradientLagoon: '#2BD9D9, #5C9CE6',
+    gradientLavender: '#928FFF, #4B47B2',
+    gradientMarine: '#2EE54D, #0D7EFF',
+    gradientMidnight: '#73D0FF, #3885E1, #0032A6',
+    gradientOrange: '#FFBF80, #E66B2E',
+    gradientPink: '#FF8880, #E62E6B',
+    gradientPurple: '#A393F5, #735CE6',
+    gradientRaspberryPink: '#FF80D5, #E645B1',
+    gradientRed: '#FF7583, #E62E40',
+    gradientRetrowave: '#30F2B1, #5967FF, #FF26A5',
+    gradientSunset: '#FFD24D, #F26549, #E62E6B',
+    gradientTurquoise: '#8AE6E6, #12B3B3',
+    gradientTwilight: '#FF4D87, #9F40FF, #3399FF',
+    gradientUnicorn: '#FF99CC, #A179F2, #5CA1E6',
+    gradientViolet: '#D3A6FF, #903FE0',
+    gradientYellow: '#FFC44D, #F07300',
+    gradientYellowBright: '#FFD54F, #E7A902',
+    gradientHalloweenOrange: '#CB1E3B, #F05C44, #FFA000',
+    gradientHalloweenViolet: '#FFA000, #CD4C4B, #792EC0',
+    gradientNewYear: '#BB64E4, #805BD7, #2866D5',
+    gradientFrost: '#4FA0FF, #016CEA',
+    gradientValentine: '#FF8A65, #F25383, #8F13DB',
+    gradientWarmValentine: '#F3386A, #FF819E',
+    gradientSberkot: '#9DF19D, #31C2A7, #21A19A, #107F8C',
+    gradientMable: '#D9F4FF, #D9F4FF',
+    gradientWomensDay: '#FF99CC, #E52E6A',
+};
+exports.lightTheme = __assign(__assign(__assign(__assign(__assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), { colors: __assign(__assign({}, exports.lightColors.colors), (0, exports.vkLocalColors)(scheme_json_1.bright_light)) }), exports.gradients), exports.lightGradient), exports.lightElevation), { 
     // Типографика
     fontFamilyAccent: fontFamilyAccent, fontFamilyBase: fontFamilyBase, fontWeightAccent1: fontWeightAccent1, fontWeightAccent2: fontWeightAccent2, fontWeightAccent3: fontWeightAccent3, fontWeightBase1: fontWeightBase1, fontWeightBase2: fontWeightBase2, fontWeightBase3: fontWeightBase3, fontTitle1: {
         regular: {
@@ -577,4 +641,4 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
     }, 
     // Разное
     animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', animationEasingPlatform: 'cubic-bezier(0.4, 0, 0.2, 1)', opacityDisable: 0.4, opacityDisableAccessibility: 0.64, zIndexModal: 99, zIndexPopout: 100 });
-exports.darkTheme = __assign(__assign(__assign(__assign(__assign({}, exports.lightTheme), exports.darkColors), exports.darkGradient), exports.darkElevation), { themeName: 'vkBaseDark', themeInheritsFrom: 'vkBase', colorsScheme: 'dark' });
+exports.darkTheme = __assign(__assign(__assign(__assign(__assign(__assign({}, exports.lightTheme), exports.darkColors), { colors: __assign(__assign({}, exports.darkColors.colors), (0, exports.vkLocalColors)(scheme_json_1.space_gray)) }), exports.darkGradient), exports.darkElevation), { themeName: 'vkBaseDark', themeInheritsFrom: 'vkBase', colorsScheme: 'dark' });

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

@@ -347,9 +347,11 @@
 	--vkui--type_border_position: inset;
 	--vkui--theme_name_base: 'calendar';
 	--vkui--calendar_elevation_header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
+	--vkui--calendar_elevation_event_form: 0px 4px 64px 0px rgba(0, 16, 61, 0.2);
 	--vkui--calendar_size_border_radius_small: 4px;
 	--vkui--calendar_size_border_radius_medium: 6px;
 	--vkui--calendar_size_border_radius_large: 8px;
+	--vkui--calendar_image_overlay_background: none;
 	--vkui--calendar_font_text_event--font_size--regular: 17px;
 	--vkui--calendar_font_text_event--line_height--regular: 24px;
 	--vkui--calendar_font_text_event--font_weight--regular: 400;
@@ -732,12 +734,12 @@
 	--vkui--calendar_color_overlay_background: transparent;
 	--vkui--calendar_color_overlay_background--hover: rgba(0, 16, 61, 0.04);
 	--vkui--calendar_color_overlay_background--active: rgba(0, 16, 61, 0.08);
-	--vkui--calendar_color_sidebar_item_icon_primary: #333333;
-	--vkui--calendar_color_sidebar_item_icon_primary--hover: #313233;
-	--vkui--calendar_color_sidebar_item_icon_primary--active: #2F3034;
-	--vkui--calendar_color_sidebar_item_text_primary: #333333;
-	--vkui--calendar_color_sidebar_item_text_primary--hover: #313233;
-	--vkui--calendar_color_sidebar_item_text_primary--active: #2F3034;
+	--vkui--calendar_color_sidebar_item_icon_primary: #2C2D2E;
+	--vkui--calendar_color_sidebar_item_icon_primary--hover: #2A2C2F;
+	--vkui--calendar_color_sidebar_item_icon_primary--active: #282B2F;
+	--vkui--calendar_color_sidebar_item_text_primary: #2C2D2E;
+	--vkui--calendar_color_sidebar_item_text_primary--hover: #2A2C2F;
+	--vkui--calendar_color_sidebar_item_text_primary--active: #282B2F;
 	--vkui--calendar_color_sidebar_item_icon_secondary: #87898F;
 	--vkui--calendar_color_sidebar_item_icon_secondary--hover: #82848C;
 	--vkui--calendar_color_sidebar_item_icon_secondary--active: #7C7F88;
@@ -756,6 +758,21 @@
 	--vkui--calendar_color_sidebar_scrollbar: #C7C7C7;
 	--vkui--calendar_color_sidebar_scrollbar--hover: #BFC0C1;
 	--vkui--calendar_color_sidebar_scrollbar--active: #B7B8BC;
+	--vkui--calendar_color_header_background: #FFFFFF;
+	--vkui--calendar_color_header_background--hover: #F5F5F7;
+	--vkui--calendar_color_header_background--active: #EBECEF;
+	--vkui--calendar_color_header_secondary_alpha: rgba(0, 95, 249, 0.1);
+	--vkui--calendar_color_header_secondary_alpha--hover: rgba(0, 95, 249, 0.14);
+	--vkui--calendar_color_header_secondary_alpha--active: rgba(0, 95, 249, 0.18);
+	--vkui--calendar_color_headeron_secondary: #005FF9;
+	--vkui--calendar_color_headeron_secondary--hover: #005CF1;
+	--vkui--calendar_color_headeron_secondary--active: #0059EA;
+	--vkui--calendar_color_headeron_widget_alpha: rgba(0, 95, 249, 1);
+	--vkui--calendar_color_headeron_widget_alpha--hover: #005CF1;
+	--vkui--calendar_color_headeron_widget_alpha--active: #0059EA;
+	--vkui--calendar_color_header_widget_background_alpha: rgba(255, 255, 255, 1);
+	--vkui--calendar_color_header_widget_background_alpha--hover: #F5F5F7;
+	--vkui--calendar_color_header_widget_background_alpha--active: #EBECEF;
 	--vkui--calendar_color_header_icon: #2C2D2E;
 	--vkui--calendar_color_header_icon--hover: #2A2C2F;
 	--vkui--calendar_color_header_icon--active: #282B2F;
@@ -771,9 +788,9 @@
 	--vkui--calendar_color_header_search_icon: #B6B8BE;
 	--vkui--calendar_color_header_search_icon--hover: #AFB1B9;
 	--vkui--calendar_color_header_search_icon--active: #A7ABB4;
-	--vkui--calendar_color_header_search_text_collapsed: #87898F;
-	--vkui--calendar_color_header_search_text_collapsed--hover: #82848C;
-	--vkui--calendar_color_header_search_text_collapsed--active: #7C7F88;
+	--vkui--calendar_color_header_search_text_collapsed: #2C2D2E;
+	--vkui--calendar_color_header_search_text_collapsed--hover: #2A2C2F;
+	--vkui--calendar_color_header_search_text_collapsed--active: #282B2F;
 	--vkui--calendar_color_header_search_background: #F0F1F3;
 	--vkui--calendar_color_header_search_background--hover: #E6E8EC;
 	--vkui--calendar_color_header_search_background--active: #DDDFE4;

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

@@ -347,9 +347,11 @@
 	--vkui--type_border_position: inset;
 	--vkui--theme_name_base: 'calendar';
 	--vkui--calendar_elevation_header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
+	--vkui--calendar_elevation_event_form: 0px 4px 64px 0px rgba(0, 16, 61, 0.2);
 	--vkui--calendar_size_border_radius_small: 4px;
 	--vkui--calendar_size_border_radius_medium: 6px;
 	--vkui--calendar_size_border_radius_large: 8px;
+	--vkui--calendar_image_overlay_background: none;
 	--vkui--calendar_font_text_event--font_size--regular: 17px;
 	--vkui--calendar_font_text_event--line_height--regular: 24px;
 	--vkui--calendar_font_text_event--font_weight--regular: 400;

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

@@ -27,6 +27,8 @@
 	--vkui--type_border_position: inset;
 	--vkui--theme_name_base: 'calendar';
 	--vkui--calendar_elevation_header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
+	--vkui--calendar_elevation_event_form: 0px 4px 64px 0px rgba(0, 16, 61, 0.2);
+	--vkui--calendar_image_overlay_background: none;
 	--vkui--colors_scheme: light;
 	--vkui--color_background_accent: #005FF9;
 	--vkui--color_background_accent--hover: #005CF1;
@@ -385,12 +387,12 @@
 	--vkui--calendar_color_overlay_background: transparent;
 	--vkui--calendar_color_overlay_background--hover: rgba(0, 16, 61, 0.04);
 	--vkui--calendar_color_overlay_background--active: rgba(0, 16, 61, 0.08);
-	--vkui--calendar_color_sidebar_item_icon_primary: #333333;
-	--vkui--calendar_color_sidebar_item_icon_primary--hover: #313233;
-	--vkui--calendar_color_sidebar_item_icon_primary--active: #2F3034;
-	--vkui--calendar_color_sidebar_item_text_primary: #333333;
-	--vkui--calendar_color_sidebar_item_text_primary--hover: #313233;
-	--vkui--calendar_color_sidebar_item_text_primary--active: #2F3034;
+	--vkui--calendar_color_sidebar_item_icon_primary: #2C2D2E;
+	--vkui--calendar_color_sidebar_item_icon_primary--hover: #2A2C2F;
+	--vkui--calendar_color_sidebar_item_icon_primary--active: #282B2F;
+	--vkui--calendar_color_sidebar_item_text_primary: #2C2D2E;
+	--vkui--calendar_color_sidebar_item_text_primary--hover: #2A2C2F;
+	--vkui--calendar_color_sidebar_item_text_primary--active: #282B2F;
 	--vkui--calendar_color_sidebar_item_icon_secondary: #87898F;
 	--vkui--calendar_color_sidebar_item_icon_secondary--hover: #82848C;
 	--vkui--calendar_color_sidebar_item_icon_secondary--active: #7C7F88;
@@ -409,6 +411,21 @@
 	--vkui--calendar_color_sidebar_scrollbar: #C7C7C7;
 	--vkui--calendar_color_sidebar_scrollbar--hover: #BFC0C1;
 	--vkui--calendar_color_sidebar_scrollbar--active: #B7B8BC;
+	--vkui--calendar_color_header_background: #FFFFFF;
+	--vkui--calendar_color_header_background--hover: #F5F5F7;
+	--vkui--calendar_color_header_background--active: #EBECEF;
+	--vkui--calendar_color_header_secondary_alpha: rgba(0, 95, 249, 0.1);
+	--vkui--calendar_color_header_secondary_alpha--hover: rgba(0, 95, 249, 0.14);
+	--vkui--calendar_color_header_secondary_alpha--active: rgba(0, 95, 249, 0.18);
+	--vkui--calendar_color_headeron_secondary: #005FF9;
+	--vkui--calendar_color_headeron_secondary--hover: #005CF1;
+	--vkui--calendar_color_headeron_secondary--active: #0059EA;
+	--vkui--calendar_color_headeron_widget_alpha: rgba(0, 95, 249, 1);
+	--vkui--calendar_color_headeron_widget_alpha--hover: #005CF1;
+	--vkui--calendar_color_headeron_widget_alpha--active: #0059EA;
+	--vkui--calendar_color_header_widget_background_alpha: rgba(255, 255, 255, 1);
+	--vkui--calendar_color_header_widget_background_alpha--hover: #F5F5F7;
+	--vkui--calendar_color_header_widget_background_alpha--active: #EBECEF;
 	--vkui--calendar_color_header_icon: #2C2D2E;
 	--vkui--calendar_color_header_icon--hover: #2A2C2F;
 	--vkui--calendar_color_header_icon--active: #282B2F;
@@ -424,9 +441,9 @@
 	--vkui--calendar_color_header_search_icon: #B6B8BE;
 	--vkui--calendar_color_header_search_icon--hover: #AFB1B9;
 	--vkui--calendar_color_header_search_icon--active: #A7ABB4;
-	--vkui--calendar_color_header_search_text_collapsed: #87898F;
-	--vkui--calendar_color_header_search_text_collapsed--hover: #82848C;
-	--vkui--calendar_color_header_search_text_collapsed--active: #7C7F88;
+	--vkui--calendar_color_header_search_text_collapsed: #2C2D2E;
+	--vkui--calendar_color_header_search_text_collapsed--hover: #2A2C2F;
+	--vkui--calendar_color_header_search_text_collapsed--active: #282B2F;
 	--vkui--calendar_color_header_search_background: #F0F1F3;
 	--vkui--calendar_color_header_search_background--hover: #E6E8EC;
 	--vkui--calendar_color_header_search_background--active: #DDDFE4;