@vkontakte/vkui-tokens 4.25.2 → 4.27.0

package/build/compilers/structJSON/compileStructJSON.js

@@ -7,6 +7,7 @@ var groups = [
     'colorsScheme',
     'size',
     'opacity',
+    'zIndex',
     'elevation',
     'gradient',
     'animation',

package/build/themeProcessors/pixelifyValues/pixelifyValues.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pixelifyValues = void 0;
-var numericCSSProperties = /^(breakpoints$|fontWeight)/i;
+var numericCSSProperties = /^(breakpoints$|fontWeight|zIndex)/i;
 /**
  * Процессор, который превращает численные значения переменных в строковые
  * пример fontSize: 14 -> fontSize: "14px"

package/interfaces/general/index.d.ts

@@ -9,6 +9,7 @@ import { Adaptive } from './tools';
 import { NamifyObject } from './tools/cssVars';
 import { StringifyObject } from './tools/utils';
 import { Fonts, TypographyBaseProps } from './typography';
+import { ZIndex } from './zIndex';
 import ColorScheme = Property.ColorScheme;
 import { StaticTokens, Tokens } from './tools/tokenValue';
 interface AdaptiveInterfaceValues extends Sizes, Fonts {
@@ -57,9 +58,9 @@ export interface WithThemeType {
     themeType: 'root' | 'flat' | 'pixelify' | 'cssVars' | 'cssVarsWide';
 }
 /**
- * Общий интерефейс между описанием и самой темой
+ * Общий интерфейс между описанием и самой темой
  */
-export interface ThemeGeneral extends AdaptiveTokens, SpecialTokens, ToneValues, TypographyBaseProps, Elevation, Gradients, Animations {
+export interface ThemeGeneral extends AdaptiveTokens, SpecialTokens, ToneValues, ZIndex, TypographyBaseProps, Elevation, Gradients, Animations {
 }
 /**
  * Интерфейс описания Темы (в этом типе описываются все темы дизайн-системы)
@@ -77,7 +78,7 @@ export interface Theme extends ThemeGeneral, ColorsFinal {
     themeType: 'root';
 }
 /**
- * Тема, в коротой все значения пикселизированы. Т.е. 16 -> '16px'
+ * Тема, в которой все значения пикселизированы. Т.е. 16 -> '16px'
  */
 export type PixelifyTheme<T extends Partial<Record<keyof T, any>> = StaticTokens<Theme>> = StringifyObject<Omit<T, 'breakpoints' | 'themeType'>> & Pick<T, Extract<'breakpoints', keyof T>> & {
     themeType: 'pixelify';

package/interfaces/general/zIndex/index.d.ts

@@ -0,0 +1,12 @@
+export interface ZIndex {
+    /**
+     * @desc Значение положения по оси z модальных окон
+     * @tags z-index
+     */
+    zIndexModal: number;
+    /**
+     * @desc Значение положения по оси z всплывающих окон
+     * @tags z-index
+     */
+    zIndexPopout: number;
+}

package/interfaces/general/zIndex/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -21,6 +21,33 @@ export interface LocalCalendarColorDescriptionStruct {
     calendarColorButtonGroupBackgroundAccentTint: ColorDescription;
     calendarColorButtonGroupTextPositive: ColorDescription;
     calendarColorButtonGroupTextNegative: ColorDescription;
+    calendarColorEventTextMainSky: ColorDescription;
+    calendarColorBackgroundMainSkyTint: ColorDescription;
+    calendarColorBackgroundMainSkyTintAlpha20: ColorDescription;
+    calendarColorBackground: ColorDescription;
+    calendarColorOverlayBackground: ColorDescription;
+    calendarColorSidebarItemIconPrimary: ColorDescription;
+    calendarColorSidebarItemTextPrimary: ColorDescription;
+    calendarColorSidebarItemIconSecondary: ColorDescription;
+    calendarColorSidebarItemTextSecondary: ColorDescription;
+    calendarColorSidebarComposeButtonBackground: ColorDescription;
+    calendarColorSidebarComposeButtonIcon: ColorDescription;
+    calendarColorSidebarComposeButtonText: ColorDescription;
+    calendarColorSidebarScrollbar: ColorDescription;
+    calendarColorHeaderIcon: ColorDescription;
+    calendarColorHeaderTextSecondary: ColorDescription;
+    calendarColorHeaderButtonText: ColorDescription;
+    calendarColorHeaderProgress: ColorDescription;
+    calendarColorHeaderSearchIcon: ColorDescription;
+    calendarColorHeaderSearchTextCollapsed: ColorDescription;
+    calendarColorHeaderSearchBackground: ColorDescription;
+    calendarColorHeaderSearchBackgroundCollapsed: ColorDescription;
+    calendarColorHeaderSearchText: ColorDescription;
+    calendarColorTextDatePrimary: ColorDescription;
+    calendarColorTextDateSecondary: ColorDescription;
+    calendarColorTextDateAccent: ColorDescription;
+    calendarColorTextTimeline: ColorDescription;
+    calendarColorStrokeFieldBorder: ColorDescription;
 }
 export type CalendarLocalColors = {
     [key in keyof LocalCalendarColorDescriptionStruct]: ColorWithStates;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.25.2",
+  "version": "4.27.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -37,14 +37,14 @@
     "@types/color": "3.0.3",
     "@types/common-tags": "1.8.1",
     "@types/fs-extra": "9.0.13",
-    "@types/jest": "29.2.3",
+    "@types/jest": "29.2.4",
     "@types/node": "18.11.10",
     "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.8",
+    "@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/icons": "1.208.0",
+    "@vkontakte/icons": "2.3.0",
     "@vkontakte/vk-bridge": "2.7.2",
     "@vkontakte/vkui": "4.40.0",
     "babel-jest": "29.3.1",
@@ -54,7 +54,7 @@
     "color": "4.2.3",
     "common-tags": "1.8.2",
     "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.7.2",
+    "css-loader": "6.7.3",
     "css.escape": "1.5.1",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.5.0",
@@ -65,8 +65,8 @@
     "eslint-plugin-jasmine": "4.1.3",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-simple-import-sort": "8.0.0",
-    "eslint-plugin-sonarjs": "0.16.0",
-    "fs-extra": "10.1.0",
+    "eslint-plugin-sonarjs": "0.17.0",
+    "fs-extra": "11.1.0",
     "html-webpack-plugin": "5.5.0",
     "jest": "29.3.1",
     "jest-junit": "15.0.0",
@@ -79,12 +79,12 @@
     "terser-webpack-plugin": "5.3.6",
     "ts-jest": "29.0.3",
     "ts-loader": "9.4.2",
-    "ts-morph": "16.0.0",
+    "ts-morph": "17.0.1",
     "ts-node": "10.9.1",
-    "tsconfig-paths": "4.1.0",
+    "tsconfig-paths": "4.1.1",
     "tscpaths": "0.0.9",
-    "type-fest": "3.3.0",
-    "typescript": "4.9.3",
+    "type-fest": "3.4.0",
+    "typescript": "4.9.4",
     "webpack": "5.75.0",
     "webpack-cli": "5.0.1",
     "webpack-dev-server": "4.11.1",

package/themeDescriptions/base/paradigm.js

@@ -561,7 +561,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         regular: 12,
     }, 
     // Прочие отступы
-    elevation1: '0 2px 0 0 rgba(0, 16, 61, 0.04)', elevation1InvertY: '0 -2px 0 0 rgba(0, 16, 61, 0.04)', elevation2: '0 4px 32px 0 rgba(0, 16, 61, 0.32)', elevation3: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', elevation4: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4), gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryLight), animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', animationEasingPlatform: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.48, opacityDisableAccessibility: 0.64 });
+    elevation1: '0 2px 0 0 rgba(0, 16, 61, 0.04)', elevation1InvertY: '0 -2px 0 0 rgba(0, 16, 61, 0.04)', elevation2: '0 4px 32px 0 rgba(0, 16, 61, 0.32)', elevation3: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', elevation4: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4), gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryLight), animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', animationEasingPlatform: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.48, opacityDisableAccessibility: 0.64, zIndexModal: 99, zIndexPopout: 100 });
 var x05 = common_1.helpers.x05, x1 = common_1.helpers.x1, x2 = common_1.helpers.x2, x3 = common_1.helpers.x3, x4 = common_1.helpers.x4, x5 = common_1.helpers.x5, x6 = common_1.helpers.x6, x8 = common_1.helpers.x8, x10 = common_1.helpers.x10;
 exports.lightTheme = __assign(__assign(__assign({}, exports.lightThemeBase), common_1.helpers), { colors: __assign(__assign({}, exports.lightThemeBase.colors), { colorRating: '#ffd400', colorButtonContrastAlpha: {
             normal: 'rgba(255, 255, 255, 1)',

package/themeDescriptions/base/vk.js

@@ -597,5 +597,5 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
         regular: 12,
     }, 
     // Разное
-    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 });
+    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' });

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

@@ -243,6 +243,8 @@
 	--vkui--animation_easing_platform: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--vkui--opacity_disable: 0.48;
 	--vkui--opacity_disable_accessibility: 0.64;
+	--vkui--z_index_modal: 99;
+	--vkui--z_index_popout: 100;
 	--vkui--x0: 0px;
 	--vkui--x025: 1px;
 	--vkui--x05: 2px;
@@ -715,6 +717,87 @@
 	--vkui--calendar_color_button_group_text_negative: #CE1414;
 	--vkui--calendar_color_button_group_text_negative--hover: #C61416;
 	--vkui--calendar_color_button_group_text_negative--active: #BE1417;
+	--vkui--calendar_color_event_text_main_sky: #20455B;
+	--vkui--calendar_color_event_text_main_sky--hover: #1F435A;
+	--vkui--calendar_color_event_text_main_sky--active: #1D4159;
+	--vkui--calendar_color_background_main_sky_tint: #ECF8FF;
+	--vkui--calendar_color_background_main_sky_tint--hover: #E3EFF7;
+	--vkui--calendar_color_background_main_sky_tint--active: #D9E5EF;
+	--vkui--calendar_color_background_main_sky_tint_alpha20: rgba(0, 16, 61, 0.122);
+	--vkui--calendar_color_background_main_sky_tint_alpha20--hover: rgba(0, 16, 61, 0.16);
+	--vkui--calendar_color_background_main_sky_tint_alpha20--active: rgba(0, 16, 61, 0.2);
+	--vkui--calendar_color_background: #FFFFFF;
+	--vkui--calendar_color_background--hover: #F5F5F7;
+	--vkui--calendar_color_background--active: #EBECEF;
+	--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_secondary: #87898F;
+	--vkui--calendar_color_sidebar_item_icon_secondary--hover: #82848C;
+	--vkui--calendar_color_sidebar_item_icon_secondary--active: #7C7F88;
+	--vkui--calendar_color_sidebar_item_text_secondary: #87898F;
+	--vkui--calendar_color_sidebar_item_text_secondary--hover: #82848C;
+	--vkui--calendar_color_sidebar_item_text_secondary--active: #7C7F88;
+	--vkui--calendar_color_sidebar_compose_button_background: #FFFFFF;
+	--vkui--calendar_color_sidebar_compose_button_background--hover: #F5F5F7;
+	--vkui--calendar_color_sidebar_compose_button_background--active: #EBECEF;
+	--vkui--calendar_color_sidebar_compose_button_icon: #333333;
+	--vkui--calendar_color_sidebar_compose_button_icon--hover: #313233;
+	--vkui--calendar_color_sidebar_compose_button_icon--active: #2F3034;
+	--vkui--calendar_color_sidebar_compose_button_text: #333333;
+	--vkui--calendar_color_sidebar_compose_button_text--hover: #313233;
+	--vkui--calendar_color_sidebar_compose_button_text--active: #2F3034;
+	--vkui--calendar_color_sidebar_scrollbar: #C7C7C7;
+	--vkui--calendar_color_sidebar_scrollbar--hover: #BFC0C1;
+	--vkui--calendar_color_sidebar_scrollbar--active: #B7B8BC;
+	--vkui--calendar_color_header_icon: #2C2D2E;
+	--vkui--calendar_color_header_icon--hover: #2A2C2F;
+	--vkui--calendar_color_header_icon--active: #282B2F;
+	--vkui--calendar_color_header_text_secondary: #93969B;
+	--vkui--calendar_color_header_text_secondary--hover: #8D9197;
+	--vkui--calendar_color_header_text_secondary--active: #878B93;
+	--vkui--calendar_color_header_button_text: #2C2D2E;
+	--vkui--calendar_color_header_button_text--hover: #2A2C2F;
+	--vkui--calendar_color_header_button_text--active: #282B2F;
+	--vkui--calendar_color_header_progress: #FF9E00;
+	--vkui--calendar_color_header_progress--hover: #F59802;
+	--vkui--calendar_color_header_progress--active: #EB9305;
+	--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_background: #F0F1F3;
+	--vkui--calendar_color_header_search_background--hover: #E6E8EC;
+	--vkui--calendar_color_header_search_background--active: #DDDFE4;
+	--vkui--calendar_color_header_search_background_collapsed: #F0F1F3;
+	--vkui--calendar_color_header_search_background_collapsed--hover: #E6E8EC;
+	--vkui--calendar_color_header_search_background_collapsed--active: #DDDFE4;
+	--vkui--calendar_color_header_search_text: #2C2D2E;
+	--vkui--calendar_color_header_search_text--hover: #2A2C2F;
+	--vkui--calendar_color_header_search_text--active: #282B2F;
+	--vkui--calendar_color_text_date_primary: #2C2D2E;
+	--vkui--calendar_color_text_date_primary--hover: #2A2C2F;
+	--vkui--calendar_color_text_date_primary--active: #282B2F;
+	--vkui--calendar_color_text_date_secondary: #93969B;
+	--vkui--calendar_color_text_date_secondary--hover: #8D9197;
+	--vkui--calendar_color_text_date_secondary--active: #878B93;
+	--vkui--calendar_color_text_date_accent: #005FF9;
+	--vkui--calendar_color_text_date_accent--hover: #005CF1;
+	--vkui--calendar_color_text_date_accent--active: #0059EA;
+	--vkui--calendar_color_text_timeline: #2C2D2E;
+	--vkui--calendar_color_text_timeline--hover: #2A2C2F;
+	--vkui--calendar_color_text_timeline--active: #282B2F;
+	--vkui--calendar_color_stroke_field_border: #E0E2E8;
+	--vkui--calendar_color_stroke_field_border--hover: #D7DAE1;
+	--vkui--calendar_color_stroke_field_border--active: #CED1DA;
 }
 
 .vkui--font_title1--regular {

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

@@ -243,6 +243,8 @@
 	--vkui--animation_easing_platform: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--vkui--opacity_disable: 0.48;
 	--vkui--opacity_disable_accessibility: 0.64;
+	--vkui--z_index_modal: 99;
+	--vkui--z_index_popout: 100;
 	--vkui--x0: 0px;
 	--vkui--x025: 1px;
 	--vkui--x05: 2px;

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

@@ -15,6 +15,8 @@
 	--vkui--animation_easing_platform: cubic-bezier(0.3, 0.3, 0.5, 1);
 	--vkui--opacity_disable: 0.48;
 	--vkui--opacity_disable_accessibility: 0.64;
+	--vkui--z_index_modal: 99;
+	--vkui--z_index_popout: 100;
 	--vkui--tone_value_overlay: 0.48;
 	--vkui--tone_value_viewer: 0.88;
 	--vkui--tone_value_toolbar: 0.24;
@@ -368,4 +370,85 @@
 	--vkui--calendar_color_button_group_text_negative: #CE1414;
 	--vkui--calendar_color_button_group_text_negative--hover: #C61416;
 	--vkui--calendar_color_button_group_text_negative--active: #BE1417;
+	--vkui--calendar_color_event_text_main_sky: #20455B;
+	--vkui--calendar_color_event_text_main_sky--hover: #1F435A;
+	--vkui--calendar_color_event_text_main_sky--active: #1D4159;
+	--vkui--calendar_color_background_main_sky_tint: #ECF8FF;
+	--vkui--calendar_color_background_main_sky_tint--hover: #E3EFF7;
+	--vkui--calendar_color_background_main_sky_tint--active: #D9E5EF;
+	--vkui--calendar_color_background_main_sky_tint_alpha20: rgba(0, 16, 61, 0.122);
+	--vkui--calendar_color_background_main_sky_tint_alpha20--hover: rgba(0, 16, 61, 0.16);
+	--vkui--calendar_color_background_main_sky_tint_alpha20--active: rgba(0, 16, 61, 0.2);
+	--vkui--calendar_color_background: #FFFFFF;
+	--vkui--calendar_color_background--hover: #F5F5F7;
+	--vkui--calendar_color_background--active: #EBECEF;
+	--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_secondary: #87898F;
+	--vkui--calendar_color_sidebar_item_icon_secondary--hover: #82848C;
+	--vkui--calendar_color_sidebar_item_icon_secondary--active: #7C7F88;
+	--vkui--calendar_color_sidebar_item_text_secondary: #87898F;
+	--vkui--calendar_color_sidebar_item_text_secondary--hover: #82848C;
+	--vkui--calendar_color_sidebar_item_text_secondary--active: #7C7F88;
+	--vkui--calendar_color_sidebar_compose_button_background: #FFFFFF;
+	--vkui--calendar_color_sidebar_compose_button_background--hover: #F5F5F7;
+	--vkui--calendar_color_sidebar_compose_button_background--active: #EBECEF;
+	--vkui--calendar_color_sidebar_compose_button_icon: #333333;
+	--vkui--calendar_color_sidebar_compose_button_icon--hover: #313233;
+	--vkui--calendar_color_sidebar_compose_button_icon--active: #2F3034;
+	--vkui--calendar_color_sidebar_compose_button_text: #333333;
+	--vkui--calendar_color_sidebar_compose_button_text--hover: #313233;
+	--vkui--calendar_color_sidebar_compose_button_text--active: #2F3034;
+	--vkui--calendar_color_sidebar_scrollbar: #C7C7C7;
+	--vkui--calendar_color_sidebar_scrollbar--hover: #BFC0C1;
+	--vkui--calendar_color_sidebar_scrollbar--active: #B7B8BC;
+	--vkui--calendar_color_header_icon: #2C2D2E;
+	--vkui--calendar_color_header_icon--hover: #2A2C2F;
+	--vkui--calendar_color_header_icon--active: #282B2F;
+	--vkui--calendar_color_header_text_secondary: #93969B;
+	--vkui--calendar_color_header_text_secondary--hover: #8D9197;
+	--vkui--calendar_color_header_text_secondary--active: #878B93;
+	--vkui--calendar_color_header_button_text: #2C2D2E;
+	--vkui--calendar_color_header_button_text--hover: #2A2C2F;
+	--vkui--calendar_color_header_button_text--active: #282B2F;
+	--vkui--calendar_color_header_progress: #FF9E00;
+	--vkui--calendar_color_header_progress--hover: #F59802;
+	--vkui--calendar_color_header_progress--active: #EB9305;
+	--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_background: #F0F1F3;
+	--vkui--calendar_color_header_search_background--hover: #E6E8EC;
+	--vkui--calendar_color_header_search_background--active: #DDDFE4;
+	--vkui--calendar_color_header_search_background_collapsed: #F0F1F3;
+	--vkui--calendar_color_header_search_background_collapsed--hover: #E6E8EC;
+	--vkui--calendar_color_header_search_background_collapsed--active: #DDDFE4;
+	--vkui--calendar_color_header_search_text: #2C2D2E;
+	--vkui--calendar_color_header_search_text--hover: #2A2C2F;
+	--vkui--calendar_color_header_search_text--active: #282B2F;
+	--vkui--calendar_color_text_date_primary: #2C2D2E;
+	--vkui--calendar_color_text_date_primary--hover: #2A2C2F;
+	--vkui--calendar_color_text_date_primary--active: #282B2F;
+	--vkui--calendar_color_text_date_secondary: #93969B;
+	--vkui--calendar_color_text_date_secondary--hover: #8D9197;
+	--vkui--calendar_color_text_date_secondary--active: #878B93;
+	--vkui--calendar_color_text_date_accent: #005FF9;
+	--vkui--calendar_color_text_date_accent--hover: #005CF1;
+	--vkui--calendar_color_text_date_accent--active: #0059EA;
+	--vkui--calendar_color_text_timeline: #2C2D2E;
+	--vkui--calendar_color_text_timeline--hover: #2A2C2F;
+	--vkui--calendar_color_text_timeline--active: #282B2F;
+	--vkui--calendar_color_stroke_field_border: #E0E2E8;
+	--vkui--calendar_color_stroke_field_border--hover: #D7DAE1;
+	--vkui--calendar_color_stroke_field_border--active: #CED1DA;
 }

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

@@ -341,4 +341,85 @@
 	--vkui--calendar_color_button_group_text_negative: #CE1414;
 	--vkui--calendar_color_button_group_text_negative--hover: #C61416;
 	--vkui--calendar_color_button_group_text_negative--active: #BE1417;
+	--vkui--calendar_color_event_text_main_sky: #20455B;
+	--vkui--calendar_color_event_text_main_sky--hover: #1F435A;
+	--vkui--calendar_color_event_text_main_sky--active: #1D4159;
+	--vkui--calendar_color_background_main_sky_tint: #ECF8FF;
+	--vkui--calendar_color_background_main_sky_tint--hover: #E3EFF7;
+	--vkui--calendar_color_background_main_sky_tint--active: #D9E5EF;
+	--vkui--calendar_color_background_main_sky_tint_alpha20: rgba(0, 16, 61, 0.122);
+	--vkui--calendar_color_background_main_sky_tint_alpha20--hover: rgba(0, 16, 61, 0.16);
+	--vkui--calendar_color_background_main_sky_tint_alpha20--active: rgba(0, 16, 61, 0.2);
+	--vkui--calendar_color_background: #FFFFFF;
+	--vkui--calendar_color_background--hover: #F5F5F7;
+	--vkui--calendar_color_background--active: #EBECEF;
+	--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_secondary: #87898F;
+	--vkui--calendar_color_sidebar_item_icon_secondary--hover: #82848C;
+	--vkui--calendar_color_sidebar_item_icon_secondary--active: #7C7F88;
+	--vkui--calendar_color_sidebar_item_text_secondary: #87898F;
+	--vkui--calendar_color_sidebar_item_text_secondary--hover: #82848C;
+	--vkui--calendar_color_sidebar_item_text_secondary--active: #7C7F88;
+	--vkui--calendar_color_sidebar_compose_button_background: #FFFFFF;
+	--vkui--calendar_color_sidebar_compose_button_background--hover: #F5F5F7;
+	--vkui--calendar_color_sidebar_compose_button_background--active: #EBECEF;
+	--vkui--calendar_color_sidebar_compose_button_icon: #333333;
+	--vkui--calendar_color_sidebar_compose_button_icon--hover: #313233;
+	--vkui--calendar_color_sidebar_compose_button_icon--active: #2F3034;
+	--vkui--calendar_color_sidebar_compose_button_text: #333333;
+	--vkui--calendar_color_sidebar_compose_button_text--hover: #313233;
+	--vkui--calendar_color_sidebar_compose_button_text--active: #2F3034;
+	--vkui--calendar_color_sidebar_scrollbar: #C7C7C7;
+	--vkui--calendar_color_sidebar_scrollbar--hover: #BFC0C1;
+	--vkui--calendar_color_sidebar_scrollbar--active: #B7B8BC;
+	--vkui--calendar_color_header_icon: #2C2D2E;
+	--vkui--calendar_color_header_icon--hover: #2A2C2F;
+	--vkui--calendar_color_header_icon--active: #282B2F;
+	--vkui--calendar_color_header_text_secondary: #93969B;
+	--vkui--calendar_color_header_text_secondary--hover: #8D9197;
+	--vkui--calendar_color_header_text_secondary--active: #878B93;
+	--vkui--calendar_color_header_button_text: #2C2D2E;
+	--vkui--calendar_color_header_button_text--hover: #2A2C2F;
+	--vkui--calendar_color_header_button_text--active: #282B2F;
+	--vkui--calendar_color_header_progress: #FF9E00;
+	--vkui--calendar_color_header_progress--hover: #F59802;
+	--vkui--calendar_color_header_progress--active: #EB9305;
+	--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_background: #F0F1F3;
+	--vkui--calendar_color_header_search_background--hover: #E6E8EC;
+	--vkui--calendar_color_header_search_background--active: #DDDFE4;
+	--vkui--calendar_color_header_search_background_collapsed: #F0F1F3;
+	--vkui--calendar_color_header_search_background_collapsed--hover: #E6E8EC;
+	--vkui--calendar_color_header_search_background_collapsed--active: #DDDFE4;
+	--vkui--calendar_color_header_search_text: #2C2D2E;
+	--vkui--calendar_color_header_search_text--hover: #2A2C2F;
+	--vkui--calendar_color_header_search_text--active: #282B2F;
+	--vkui--calendar_color_text_date_primary: #2C2D2E;
+	--vkui--calendar_color_text_date_primary--hover: #2A2C2F;
+	--vkui--calendar_color_text_date_primary--active: #282B2F;
+	--vkui--calendar_color_text_date_secondary: #93969B;
+	--vkui--calendar_color_text_date_secondary--hover: #8D9197;
+	--vkui--calendar_color_text_date_secondary--active: #878B93;
+	--vkui--calendar_color_text_date_accent: #005FF9;
+	--vkui--calendar_color_text_date_accent--hover: #005CF1;
+	--vkui--calendar_color_text_date_accent--active: #0059EA;
+	--vkui--calendar_color_text_timeline: #2C2D2E;
+	--vkui--calendar_color_text_timeline--hover: #2A2C2F;
+	--vkui--calendar_color_text_timeline--active: #282B2F;
+	--vkui--calendar_color_stroke_field_border: #E0E2E8;
+	--vkui--calendar_color_stroke_field_border--hover: #D7DAE1;
+	--vkui--calendar_color_stroke_field_border--active: #CED1DA;
 }