@vkontakte/vkui-tokens 4.43.2-dev-78ebf3.0 → 4.44.0

package/build/helpers/convertCamelToSnake.d.ts

@@ -1,4 +1,5 @@
 /**
  * camelCase -> snake_case
  */
+export declare const SIZE_SUB_GROUP = "[0-9][X,S,M,L][s,m,l]{0,1}(?=([A-Z]|[0-9][A-Z]|$))";
 export declare function convertCamelToSnake(str: string): string;

package/build/helpers/convertCamelToSnake.js

@@ -1,10 +1,13 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertCamelToSnake = void 0;
 /**
  * camelCase -> snake_case
  */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertCamelToSnake = exports.SIZE_SUB_GROUP = void 0;
+// 2Xs, 3Xs, 4S
+exports.SIZE_SUB_GROUP = '[0-9][X,S,M,L][s,m,l]{0,1}(?=([A-Z]|[0-9][A-Z]|$))';
+var REPLACE_REGEXP = new RegExp("(".concat(exports.SIZE_SUB_GROUP, "|[A-Z])"), 'g');
 function convertCamelToSnake(str) {
-    return str.replace(/([A-Z])/g, function (letter) { return "_".concat(letter.toLowerCase()); }).replace(/^_/, '');
+    return str.replace(REPLACE_REGEXP, function (letter) { return "_".concat(letter.toLowerCase()); }).replace(/^_/, '');
 }
 exports.convertCamelToSnake = convertCamelToSnake;

package/build/helpers/convertCamelToSnake.test.js

@@ -15,8 +15,15 @@ var convertCamelToSnake_1 = require("./convertCamelToSnake");
     (0, globals_1.it)('should convert two words string', function () {
         (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('desktopS')).toBe('desktop_s');
     });
+    (0, globals_1.it)('should convert two words string with number prefix', function () {
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('desktop3S')).toBe('desktop_3s');
+    });
     (0, globals_1.it)('should convert many words string', function () {
-        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('helloWorldMyFriend')).toBe('hello_world_my_friend');
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('hello1SWorldMy2XsFriend3Xs')).toBe('hello_1s_world_my_2xs_friend_3xs');
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('sizeGridColumn1X2')).toBe('size_grid_column1_x2');
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('size2XsRegular2L')).toBe('size_2xs_regular_2l');
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('fontCaption2Caps')).toBe('font_caption2_caps');
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('searchCaption2MailSans')).toBe('search_caption2_mail_sans');
     });
     (0, globals_1.it)('should convert special case 1', function () {
         (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('octaviusShadowLetterList')).toBe('octavius_shadow_letter_list');

package/build/helpers/unCamelcasify.js

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.unCamelcasify = void 0;
+var convertCamelToSnake_1 = require("./convertCamelToSnake");
+// 2Xs, 3Xs, 4S
+var REPLACE_REGEXP = new RegExp("(?:^\\w|".concat(convertCamelToSnake_1.SIZE_SUB_GROUP, "|[A-Z]|\\b\\w)"), 'g');
 function unCamelcasify(str, delimeter) {
     if (delimeter === void 0) { delimeter = '-'; }
-    return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (letter, index) {
-        return "".concat(index === 0 ? '' : delimeter).concat(letter.toLowerCase());
-    });
+    return str
+        .replace(REPLACE_REGEXP, function (letter) { return "".concat(delimeter).concat(letter.toLowerCase()); })
+        .replace(new RegExp("^".concat(delimeter)), '');
 }
 exports.unCamelcasify = unCamelcasify;

package/build/helpers/unCamelcasify.test.js

@@ -12,7 +12,12 @@ var unCamelcasify_1 = require("./unCamelcasify");
     (0, globals_1.it)('should convert two words string', function () {
         (0, globals_1.expect)((0, unCamelcasify_1.unCamelcasify)('desktopS')).toBe('desktop-s');
     });
+    (0, globals_1.it)('should convert two words string with number prefix', function () {
+        (0, globals_1.expect)((0, unCamelcasify_1.unCamelcasify)('desktop3S')).toBe('desktop-3s');
+    });
     (0, globals_1.it)('should convert many words string', function () {
-        (0, globals_1.expect)((0, unCamelcasify_1.unCamelcasify)('helloWorldMyFriend')).toBe('hello-world-my-friend');
+        (0, globals_1.expect)((0, unCamelcasify_1.unCamelcasify)('hello1SWorldMy2XsFriend3Xs')).toBe('hello-1s-world-my-2xs-friend-3xs');
+        (0, globals_1.expect)((0, unCamelcasify_1.unCamelcasify)('sizeGridColumn1X2')).toBe('size-grid-column1-x2');
+        (0, globals_1.expect)((0, unCamelcasify_1.unCamelcasify)('size2Xs3Regular2L')).not.toBe('size-2x-3regular-2l');
     });
 });

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

@@ -368,6 +368,16 @@ export interface Sizes {
     sizeBorder3x: number;
 }
 export interface SpacingSizes {
+    /**
+     * @desc Стандартный токен размера 3xs для отступов
+     * @tags size
+     */
+    spacingSize3Xs: number;
+    /**
+     * @desc Стандартный токен размера 2xs для отступов
+     * @tags size
+     */
+    spacingSize2Xs: number;
     /**
      * @desc Стандартный токен размера xs для отступов
      * @tags size
@@ -393,4 +403,9 @@ export interface SpacingSizes {
      * @tags size
      */
     spacingSizeXl: number;
+    /**
+     * @desc Стандартный токен размера 2xl для отступов
+     * @tags size
+     */
+    spacingSize2Xl: number;
 }

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

@@ -5,72 +5,20 @@ import { Font } from '../../general/typography';
 import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
 export type MediaViewportsTuple = ['touch', 'tablet', 'desktopS', 'desktopM'];
 interface ProjectColors {
-    /**
-     * @desc Акцентный цвет проекта auto.mail.ru
-     * @tags color
-     */
     colorPrimaryAuto: ColorWithStates;
-    /**
-     * @desc Основной акцентный цвет. Используют проекты news.mail.ru, sportmail.ru, pogoda.mail.ru
-     * @tags color
-     */
     colorPrimaryBase: ColorWithStates;
-    /**
-     * @desc Акцентный цвет проекта deti.mail.ru
-     * @tags color
-     */
     colorPrimaryDeti: ColorWithStates;
-    /**
-     * @desc Акцентный цвет проекта dobro.mail.ru
-     * @tags color
-     */
     colorPrimaryDobro: ColorWithStates;
-    /**
-     * @desc Акцентный цвет проекта health.mail.ru
-     * @tags color, lagacy
-     */
     colorPrimaryHealth: ColorWithStates;
-    /**
-     * @desc Альтернативный акцентный цвет проекта health.mail.ru
-     * @tags color, lagacy
-     */
     colorPrimaryHealthNew: ColorWithStates;
-    /**
-     * @desc Акцентный цвет проекта hi-tech.mail.ru
-     * @tags color
-     */
     colorPrimaryHitech: ColorWithStates;
-    /**
-     * @desc Акцентный цвет проекта kino.mail.ru
-     * @tags color
-     */
     colorPrimaryKino: ColorWithStates;
-    /**
-     * @desc Акцентный цвет проекта lady.mail.ru
-     * @tags color
-     */
     colorPrimaryLady: ColorWithStates;
     colorPrimaryMycom: ColorWithStates;
-    /**
-     * @desc Акцентный цвет проекта dom.mail.ru
-     * @tags color
-     */
     colorPrimaryRealty: ColorWithStates;
     colorPrimaryPharma: ColorWithStates;
-    /**
-     * @desc Акцентный цвет проекта pets.mail.ru
-     * @tags color
-     */
     colorPrimaryPets: ColorWithStates;
-    /**
-     * @desc Второстепенный акцентный цвет. Используют проекты news.mail.ru, sportmail.ru, pogoda.mail.ru
-     * @tags color
-     */
     colorSecondaryBase: ColorWithStates;
-    /**
-     * @desc Альтернативный акцентный цвет проекта health.mail.ru
-     * @tags color, lagacy
-     */
     colorSecondaryHealth: ColorWithStates;
     colorSecondaryMycom: ColorWithStates;
 }
@@ -90,120 +38,34 @@ type SocialColorsDescriptions = {
     [key in keyof SocialColors]: ColorDescription;
 };
 interface MediaUniqTokens {
-    /**
-     * @desc Заголовок h1
-     * @tags font
-     */
+    mediaFontMediaHeader: Adaptive<Font>;
     mediaFontMediaTitle1: Adaptive<Font>;
-    /**
-     * @desc Заголовок h2
-     * @tags font
-     */
     mediaFontMediaTitle2: Adaptive<Font>;
-    /**
-     * @desc Заголовок h3
-     * @tags font
-     */
     mediaFontMediaTitle3: Adaptive<Font>;
-    /**
-     * @desc Заголовок h4
-     * @tags font
-     */
-    mediaFontMediaTitle4: Adaptive<Font>;
-    /**
-     * @desc Заголовок h5
-     * @tags font
-     */
-    mediaFontMediaTitle5: Adaptive<Font>;
-    /**
-     * @desc Заголовок h6
-     * @tags font
-     */
-    mediaFontMediaTitle6: Adaptive<Font>;
-    /**
-     * @desc Лид статьи
-     * @tags font
-     */
     mediaFontMediaLead: Adaptive<Font>;
-    /**
-     * @desc Цитата или другой врез
-     * @tags font
-     */
-    mediaFontMediaQuote: Adaptive<Font>;
-    /**
-     * @desc Автор цитаты
-     * @tags font
-     */
-    mediaFontMediaQuotePerson: Adaptive<Font>;
-    /**
-     * @desc Параграф статьи
-     * @tags font
-     */
     mediaFontMediaParagraph: Adaptive<Font>;
-    /**
-     * @desc Второстепенный блок текста
-     * @tags font
-     */
-    mediaFontMediaParagraphSecondary: Adaptive<Font>;
-    /**
-     * @desc Второстепенный текст
-     * @tags font
-     */
-    mediaFontMediaTextSecondaryLight: Adaptive<Font>;
-    /**
-     * @desc Подпись под блоком статьи
-     * @tags font
-     */
-    mediaFontMediaCaption: Adaptive<Font>;
-    /**
-     * @desc Подпись под блоком статьи заглавными буквами
-     * @tags font
-     */
-    mediaFontMediaCaptionCaps: Adaptive<Font>;
-    /**
-     * @desc Семейство шрифтов статьи
-     * @tags font
-     */
     fontFamilyArticle: Property.FontFamily;
+    fontWeightArticle1: Property.FontWeight;
+    fontWeightArticle2: Property.FontWeight;
     fontH1: Adaptive<Font>;
     fontH2: Adaptive<Font>;
     fontH3: Adaptive<Font>;
     fontH4: Adaptive<Font>;
-    /**
-     * @desc Ширина колонки страницы
-     * @tags size, component
-     */
+    fontLead: Adaptive<Font>;
+    fontArticleBody: Adaptive<Font>;
+    fontSpecificText: Adaptive<Font>;
+    fontSpecificFootnote: Adaptive<Font>;
+    fontSpecificButton: Adaptive<Font>;
     gridWrapperContent: Adaptive<number | string>;
-    /**
-     * @desc Ширина основной колонки контента
-     * @tags size, component
-     */
     gridMainContent: Adaptive<number | string>;
-    /**
-     * @desc Ширина sidebar
-     * @tags size, component
-     */
     gridAsideContent: Adaptive<number | string>;
-    /**
-     * @desc
-     * @tags size, component
-     */
     gridColumnX2: Adaptive<string | number>;
-    /**
-     * @desc
-     * @tags size, component
-     */
     gridColumnX3: Adaptive<string | number>;
-    /**
-     * @desc
-     * @tags size, component
-     */
     gridColumnX4: Adaptive<string | number>;
-    /**
-     * @desc
-     * @tags size, component
-     */
     gridColumnX6: Adaptive<string | number>;
+    gridContent: Adaptive<number | string>;
+    gridLayoutArticle: Adaptive<string | number>;
+    gridLayoutBanner: Adaptive<string | number>;
 }
 export interface ThemeMedia extends ParadigmTheme<MediaViewportsTuple>, ProjectColors, SocialColors, MediaUniqTokens {
 }

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

@@ -203,6 +203,15 @@ export interface LocalOctaviusColorsDescriptionStruct {
     octaviusColorBackgroundNegativeTintAlpha: ColorDescription;
     octaviusColorBackgroundPositiveTintAlpha: ColorDescription;
     octaviusColorButtonBackgroundContrastAlpha: ColorDescription;
+    octaviusColorSnackbarIconPositive: ColorDescription;
+    octaviusColorSnackbarIconNegative: ColorDescription;
+    octaviusColorSnackbarIconAccent: ColorDescription;
+    octaviusColorSnackbarIconSecondary: ColorDescription;
+    octaviusColorSnackbarIconWarning: ColorDescription;
+    octaviusColorSnackbarTextAccent: ColorDescription;
+    octaviusColorSnackbarTextContrast: ColorDescription;
+    octaviusColorSnackbarBackground: ColorDescription;
+    octaviusColorSnackbarTransparent: ColorDescription;
 }
 export type OctaviusLocalColors = {
     [key in keyof LocalOctaviusColorsDescriptionStruct]: ColorWithStates;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.43.2-dev-78ebf3.0",
+  "version": "4.44.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -53,19 +53,19 @@
     "@types/react": "18.2.55",
     "@types/react-dom": "18.2.19",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.2.0",
-    "@vkontakte/icons": "2.95.0",
+    "@vkontakte/icons": "2.108.0",
     "@vkontakte/prettier-config": "0.1.0",
-    "@vkontakte/vk-bridge": "2.12.2",
+    "@vkontakte/vk-bridge": "2.14.1",
     "@vkontakte/vkjs": "1.1.1",
     "@vkontakte/vkui": "6.0.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "clean-webpack-plugin": "4.0.0",
-    "clsx": "2.0.0",
+    "clsx": "2.1.0",
     "color": "4.2.3",
     "common-tags": "1.8.2",
     "copy-webpack-plugin": "12.0.2",
-    "css-loader": "6.8.1",
+    "css-loader": "7.1.1",
     "css.escape": "1.5.1",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
@@ -84,13 +84,13 @@
     "husky": "9.0.11",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
-    "lint-staged": "15.2.0",
+    "lint-staged": "15.2.2",
     "lodash": "4.17.21",
     "prettier": "3.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "5.0.5",
-    "style-loader": "3.3.3",
+    "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
     "ts-jest": "29.1.2",
     "ts-loader": "9.5.1",
@@ -101,9 +101,9 @@
     "type-fest": "4.10.2",
     "typescript": "5.2.2",
     "typescript-eslint": "7.0.1",
-    "webpack": "5.90.1",
+    "webpack": "5.91.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.1",
+    "webpack-dev-server": "5.0.4",
     "webpack-notifier": "1.15.0"
   },
   "engines": {

package/themeDescriptions/base/paradigm.js

@@ -296,7 +296,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         },
         compact: {
             fontSize: 22,
-            lineHeight: 24,
+            lineHeight: 22,
             fontFamily: fontFamilyAccent,
             fontWeight: fontWeightAccent1,
         },
@@ -632,7 +632,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         regular: 0.33,
     }, 
     // Стандартные токены для отступов
-    spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, 
+    spacingSize3Xs: 2, spacingSize2Xs: 4, spacingSizeXs: 6, spacingSizeS: 8, spacingSizeM: 12, spacingSizeL: 16, spacingSizeXl: 20, spacingSize2Xl: 24, 
     // Прочие отступы
     elevation1: '0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)', elevation1InvertY: '0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)', elevation2: '0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)', elevation3: '0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)', elevation4: '0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)', gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4), gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryLight), gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), 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;

package/themeDescriptions/base/vk.js

@@ -241,12 +241,11 @@ exports.darkGradient = {
     gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(vk_json_1.default.dark.background.background_content),
 };
 exports.darkElevation = {
-    // TODO: Тени (Поправить для Dark)
-    elevation1: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)',
-    elevation1InvertY: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06)',
-    elevation2: '0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06)',
-    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)',
+    elevation1: '0px 0px 2px 0px rgba(0, 0, 0, 0.10), 0px 2px 2px 0px rgba(0, 0, 0, 0.20)',
+    elevation1InvertY: '0px 0px 2px 0px rgba(0, 0, 0, 0.10), 0px -2px 2px 0px rgba(0, 0, 0, 0.20)',
+    elevation2: '0px 4px 8px 0px rgba(0, 0, 0, 0.15), 0px 0px 4px 0px rgba(0, 0, 0, 0.20)',
+    elevation3: '0px 0px 2px 0px rgba(0, 0, 0, 0.30), 0px 4px 16px 0px rgba(0, 0, 0, 0.30)',
+    elevation4: '0px 0px 8px 0px rgba(0, 0, 0, 0.10), 0px 16px 16px 0px rgba(0, 0, 0, 0.20)',
 };
 exports.fonts = {
     // Типографика
@@ -292,7 +291,7 @@ exports.fonts = {
     fontDisplayTitle4: {
         regular: {
             fontSize: 17,
-            lineHeight: 24,
+            lineHeight: 22,
             fontFamily: fontFamilyAccent,
             fontWeight: fontWeightAccent1,
         },
@@ -620,7 +619,7 @@ exports.lightTheme = __assign(__assign(__assign(__assign(__assign({ themeName: '
         regular: 0.33,
     }, 
     // Стандартные токены для отступов
-    spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, 
+    spacingSize3Xs: 2, spacingSize2Xs: 4, spacingSizeXs: 6, spacingSizeS: 8, spacingSizeM: 12, spacingSizeL: 16, spacingSizeXl: 20, spacingSize2Xl: 24, 
     // Разное
     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

@@ -18,7 +18,7 @@
 	--vkui--font_display_title2--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_display_title2--font_weight--regular: 500;
 	--vkui--font_display_title2--font_size--compact: 22px;
-	--vkui--font_display_title2--line_height--compact: 24px;
+	--vkui--font_display_title2--line_height--compact: 22px;
 	--vkui--font_display_title2--font_family--compact: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_display_title2--font_weight--compact: 500;
 	--vkui--font_display_title3--font_size--regular: 19px;
@@ -254,11 +254,14 @@
 	--vkui--size_border1x--regular: 1px;
 	--vkui--size_border2x--regular: 0.5px;
 	--vkui--size_border3x--regular: 0.33px;
-	--vkui--spacing_size_xs: 4px;
-	--vkui--spacing_size_s: 6px;
-	--vkui--spacing_size_m: 8px;
-	--vkui--spacing_size_l: 10px;
-	--vkui--spacing_size_xl: 12px;
+	--vkui--spacing_size_3xs: 2px;
+	--vkui--spacing_size_2xs: 4px;
+	--vkui--spacing_size_xs: 6px;
+	--vkui--spacing_size_s: 8px;
+	--vkui--spacing_size_m: 12px;
+	--vkui--spacing_size_l: 16px;
+	--vkui--spacing_size_xl: 20px;
+	--vkui--spacing_size_2xl: 24px;
 	--vkui--elevation1: 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation1_invert_y: 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation2: 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06);
@@ -1173,8 +1176,8 @@
 .vkui--font_display_title2--compact {
 	font-size: 22px;
 	font-size: var(--vkui--font_display_title2--font_size--compact, 22px);
-	line-height: 24px;
-	line-height: var(--vkui--font_display_title2--line_height--compact, 24px);
+	line-height: 22px;
+	line-height: var(--vkui--font_display_title2--line_height--compact, 22px);
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 	font-family: var(--vkui--font_display_title2--font_family--compact, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;

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

@@ -18,7 +18,7 @@
 	--vkui--font_display_title2--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_display_title2--font_weight--regular: 500;
 	--vkui--font_display_title2--font_size--compact: 22px;
-	--vkui--font_display_title2--line_height--compact: 24px;
+	--vkui--font_display_title2--line_height--compact: 22px;
 	--vkui--font_display_title2--font_family--compact: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_display_title2--font_weight--compact: 500;
 	--vkui--font_display_title3--font_size--regular: 19px;
@@ -254,11 +254,14 @@
 	--vkui--size_border1x--regular: 1px;
 	--vkui--size_border2x--regular: 0.5px;
 	--vkui--size_border3x--regular: 0.33px;
-	--vkui--spacing_size_xs: 4px;
-	--vkui--spacing_size_s: 6px;
-	--vkui--spacing_size_m: 8px;
-	--vkui--spacing_size_l: 10px;
-	--vkui--spacing_size_xl: 12px;
+	--vkui--spacing_size_3xs: 2px;
+	--vkui--spacing_size_2xs: 4px;
+	--vkui--spacing_size_xs: 6px;
+	--vkui--spacing_size_s: 8px;
+	--vkui--spacing_size_m: 12px;
+	--vkui--spacing_size_l: 16px;
+	--vkui--spacing_size_xl: 20px;
+	--vkui--spacing_size_2xl: 24px;
 	--vkui--elevation1: 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation1_invert_y: 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation2: 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06);
@@ -434,8 +437,8 @@
 .vkui--font_display_title2--compact {
 	font-size: 22px;
 	font-size: var(--vkui--font_display_title2--font_size--compact, 22px);
-	line-height: 24px;
-	line-height: var(--vkui--font_display_title2--line_height--compact, 24px);
+	line-height: 22px;
+	line-height: var(--vkui--font_display_title2--line_height--compact, 22px);
 	font-family: MailSans, Helvetica, Arial, sans-serif;
 	font-family: var(--vkui--font_display_title2--font_family--compact, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;

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

@@ -1,10 +1,13 @@
 :root {
 	--vkui--theme_name: 'calendar';
-	--vkui--spacing_size_xs: 4px;
-	--vkui--spacing_size_s: 6px;
-	--vkui--spacing_size_m: 8px;
-	--vkui--spacing_size_l: 10px;
-	--vkui--spacing_size_xl: 12px;
+	--vkui--spacing_size_3xs: 2px;
+	--vkui--spacing_size_2xs: 4px;
+	--vkui--spacing_size_xs: 6px;
+	--vkui--spacing_size_s: 8px;
+	--vkui--spacing_size_m: 12px;
+	--vkui--spacing_size_l: 16px;
+	--vkui--spacing_size_xl: 20px;
+	--vkui--spacing_size_2xl: 24px;
 	--vkui--elevation1: 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation1_invert_y: 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation2: 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06);

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

@@ -18,7 +18,7 @@
 	--vkui--font_display_title2--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_display_title2--font_weight--regular: 500;
 	--vkui--font_display_title2--font_size--compact: 22px;
-	--vkui--font_display_title2--line_height--compact: 24px;
+	--vkui--font_display_title2--line_height--compact: 22px;
 	--vkui--font_display_title2--font_family--compact: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_display_title2--font_weight--compact: 500;
 	--vkui--font_display_title3--font_size--regular: 19px;
@@ -254,11 +254,14 @@
 	--vkui--size_border1x--regular: 1px;
 	--vkui--size_border2x--regular: 0.5px;
 	--vkui--size_border3x--regular: 0.33px;
-	--vkui--spacing_size_xs: 4px;
-	--vkui--spacing_size_s: 6px;
-	--vkui--spacing_size_m: 8px;
-	--vkui--spacing_size_l: 10px;
-	--vkui--spacing_size_xl: 12px;
+	--vkui--spacing_size_3xs: 2px;
+	--vkui--spacing_size_2xs: 4px;
+	--vkui--spacing_size_xs: 6px;
+	--vkui--spacing_size_s: 8px;
+	--vkui--spacing_size_m: 12px;
+	--vkui--spacing_size_l: 16px;
+	--vkui--spacing_size_xl: 20px;
+	--vkui--spacing_size_2xl: 24px;
 	--vkui--elevation1: 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation1_invert_y: 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation2: 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06);