@vkontakte/vkui-tokens 4.40.0 → 4.41.0

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

@@ -15,6 +15,26 @@ export type Font = {
  * Переменные, отвечающие за группы переменных, отвечающих за шрифты
  */
 export interface Fonts {
+    /**
+     * @desc Крупный выразительный текст, уровень 1
+     * @tags font
+     */
+    fontDisplayTitle1: Font;
+    /**
+     * @desc Крупный выразительный текст, уровень 2
+     * @tags font
+     */
+    fontDisplayTitle2: Font;
+    /**
+     * @desc Крупный выразительный текст, уровень 3
+     * @tags font
+     */
+    fontDisplayTitle3: Font;
+    /**
+     * @desc Крупный выразительный текст, уровень 4
+     * @tags font
+     */
+    fontDisplayTitle4: Font;
     /**
      * @desc Основной заголовок, уровень 1
      * @tags font

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.40.0",
+  "version": "4.41.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -42,15 +42,15 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.22.10",
+    "@babel/core": "7.23.0",
     "@svgr/webpack": "8.1.0",
-    "@types/color": "3.0.3",
+    "@types/color": "3.0.4",
     "@types/common-tags": "1.8.1",
     "@types/fs-extra": "11.0.2",
-    "@types/lodash": "4.14.198",
+    "@types/lodash": "4.14.199",
     "@types/node": "18.11.10",
-    "@types/react": "18.2.23",
-    "@types/react-dom": "18.2.7",
+    "@types/react": "18.2.25",
+    "@types/react-dom": "18.2.10",
     "@typescript-eslint/eslint-plugin": "6.7.3",
     "@typescript-eslint/parser": "6.7.3",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.4",
@@ -58,7 +58,7 @@
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.11.1",
     "@vkontakte/vkjs": "1.1.0",
-    "@vkontakte/vkui": "5.8.1",
+    "@vkontakte/vkui": "5.9.1",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.2",
     "clean-webpack-plugin": "4.0.0",
@@ -66,13 +66,13 @@
     "color": "4.2.3",
     "common-tags": "1.8.2",
     "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.7.3",
+    "css-loader": "6.8.1",
     "css.escape": "1.5.1",
     "eslint": "7.32.0",
-    "eslint-config-prettier": "8.8.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-config-silence": "1.0.0",
     "eslint-import-resolver-alias": "1.1.2",
-    "eslint-plugin-compat": "4.1.4",
+    "eslint-plugin-compat": "4.2.0",
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jasmine": "4.1.3",
     "eslint-plugin-prettier": "4.2.1",
@@ -81,7 +81,7 @@
     "fs-extra": "11.1.1",
     "html-webpack-plugin": "5.5.1",
     "husky": "8.0.3",
-    "jest": "29.5.0",
+    "jest": "29.7.0",
     "jest-junit": "16.0.0",
     "lint-staged": "14.0.1",
     "lodash": "4.17.21",

package/themeDescriptions/base/paradigm.js

@@ -278,7 +278,41 @@ exports.darkColors = {
 };
 exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, exports.lightColors), { 
     // Типографика
-    fontFamilyFallbacks: fontFamilyFallbacks, fontFamilyAccent: fontFamilyAccent, fontFamilyBase: fontFamilyBase, fontWeightAccent1: fontWeightAccent1, fontWeightAccent2: fontWeightAccent2, fontWeightAccent3: fontWeightAccent3, fontWeightBase1: fontWeightBase1, fontWeightBase2: fontWeightBase2, fontWeightBase3: fontWeightBase3, fontTitle1: {
+    fontFamilyFallbacks: fontFamilyFallbacks, fontFamilyAccent: fontFamilyAccent, fontFamilyBase: fontFamilyBase, fontWeightAccent1: fontWeightAccent1, fontWeightAccent2: fontWeightAccent2, fontWeightAccent3: fontWeightAccent3, fontWeightBase1: fontWeightBase1, fontWeightBase2: fontWeightBase2, fontWeightBase3: fontWeightBase3, fontDisplayTitle1: {
+        regular: {
+            fontSize: 23,
+            lineHeight: 28,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent1,
+        },
+    }, fontDisplayTitle2: {
+        regular: {
+            fontSize: 21,
+            lineHeight: 26,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent1,
+        },
+        compact: {
+            fontSize: 22,
+            lineHeight: 24,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent1,
+        },
+    }, fontDisplayTitle3: {
+        regular: {
+            fontSize: 19,
+            lineHeight: 24,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent1,
+        },
+    }, fontDisplayTitle4: {
+        regular: {
+            fontSize: 17,
+            lineHeight: 24,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent1,
+        },
+    }, fontTitle1: {
         regular: {
             fontSize: 24,
             lineHeight: 28,
@@ -540,6 +574,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     }, 
     // Компонент PanelHeader
     sizePanelHeaderHeight: {
+        compact: 48,
         regular: 56,
     }, 
     // Токены отступов для кнопок
@@ -777,7 +812,7 @@ exports.darkThemeElevation = {
     elevation3: '0 4px 32px 0 rgba(0, 0, 0, 0.48)',
     elevation4: '0 4px 32px 0 rgba(0, 0, 0, 0.48)',
 };
-exports.darkThemeBase = __assign(__assign(__assign(__assign({}, exports.lightThemeBase), { gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryDark), gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundContentDark, 0.4), themeName: 'paradigmBaseDark' }), exports.darkColors), exports.darkThemeElevation);
+exports.darkThemeBase = __assign(__assign(__assign(__assign({}, exports.lightThemeBase), { gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryDark), gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundContentDark), themeName: 'paradigmBaseDark' }), exports.darkColors), exports.darkThemeElevation);
 exports.darkTheme = __assign(__assign(__assign(__assign({}, exports.lightTheme), exports.darkThemeBase), exports.darkThemeElevation), { colorsScheme: 'dark', colors: __assign(__assign(__assign({}, exports.lightTheme.colors), exports.darkThemeBase.colors), { colorButtonContrastAlpha: {
             normal: 'rgba(255, 255, 255, 0.12)',
             hover: 'rgba(255, 255, 255, 0.2)',

package/themeDescriptions/base/vk.js

@@ -237,7 +237,7 @@ exports.darkGradient = {
     gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4),
     gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'),
     gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(vk_json_1.default.dark.background.background_tertiary),
-    gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(vk_json_1.default.dark.background.background_content, 0.4),
+    gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(vk_json_1.default.dark.background.background_content),
 };
 exports.darkElevation = {
     // TODO: Тени (Поправить для Dark)
@@ -258,6 +258,44 @@ exports.fonts = {
     fontWeightBase1: fontWeightBase1,
     fontWeightBase2: fontWeightBase2,
     fontWeightBase3: fontWeightBase3,
+    fontDisplayTitle1: {
+        regular: {
+            fontSize: 23,
+            lineHeight: 28,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent1,
+        },
+    },
+    fontDisplayTitle2: {
+        regular: {
+            fontSize: 21,
+            lineHeight: 26,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent1,
+        },
+        compact: {
+            fontSize: 22,
+            lineHeight: 24,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent1,
+        },
+    },
+    fontDisplayTitle3: {
+        regular: {
+            fontSize: 19,
+            lineHeight: 24,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent1,
+        },
+    },
+    fontDisplayTitle4: {
+        regular: {
+            fontSize: 17,
+            lineHeight: 24,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent1,
+        },
+    },
     fontTitle1: {
         regular: {
             fontSize: 24,
@@ -525,6 +563,7 @@ exports.lightTheme = __assign(__assign(__assign(__assign(__assign({ themeName: '
     }, 
     // Компонент PanelHeader
     sizePanelHeaderHeight: {
+        compact: 48,
         regular: 56,
     }, 
     // Токены отступов для кнопок

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

@@ -9,6 +9,26 @@
 	--vkui--font_weight_base1: 700;
 	--vkui--font_weight_base2: 700;
 	--vkui--font_weight_base3: 400;
+	--vkui--font_display_title1--font_size--regular: 23px;
+	--vkui--font_display_title1--line_height--regular: 28px;
+	--vkui--font_display_title1--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title1--font_weight--regular: 500;
+	--vkui--font_display_title2--font_size--regular: 21px;
+	--vkui--font_display_title2--line_height--regular: 26px;
+	--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--font_family--compact: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title2--font_weight--compact: 500;
+	--vkui--font_display_title3--font_size--regular: 19px;
+	--vkui--font_display_title3--line_height--regular: 24px;
+	--vkui--font_display_title3--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title3--font_weight--regular: 500;
+	--vkui--font_display_title4--font_size--regular: 17px;
+	--vkui--font_display_title4--line_height--regular: 24px;
+	--vkui--font_display_title4--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title4--font_weight--regular: 500;
 	--vkui--font_title1--font_size--regular: 24px;
 	--vkui--font_title1--line_height--regular: 28px;
 	--vkui--font_title1--font_weight--regular: 500;
@@ -212,6 +232,7 @@
 	--vkui--size_switch_width--compact: 32px;
 	--vkui--size_switch_pin--regular: 20px;
 	--vkui--size_switch_pin--compact: 18px;
+	--vkui--size_panel_header_height--compact: 48px;
 	--vkui--size_panel_header_height--regular: 56px;
 	--vkui--size_button_base_small_padding_horizontal--regular: 16px;
 	--vkui--size_button_base_medium_padding_horizontal--regular: 16px;
@@ -1072,6 +1093,80 @@
 	--vkui--calendar_color_icon_primary--active: #282B2F;
 }
 
+.vkui--font_display_title1--regular {
+	font-size: 23px;
+	font-size: var(--vkui--font_display_title1--font_size--regular, 23px);
+	line-height: 28px;
+	line-height: var(--vkui--font_display_title1--line_height--regular, 28px);
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title1--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-weight: 500;
+	font-weight: var(--vkui--font_display_title1--font_weight--regular, 500);
+}
+.vkui--font_display_title1 {
+	font-size: var(--vkui--font_display_title1--font_size);
+	line-height: var(--vkui--font_display_title1--line_height);
+	font-family: var(--vkui--font_display_title1--font_family);
+	font-weight: var(--vkui--font_display_title1--font_weight);
+}
+.vkui--font_display_title2--regular {
+	font-size: 21px;
+	font-size: var(--vkui--font_display_title2--font_size--regular, 21px);
+	line-height: 26px;
+	line-height: var(--vkui--font_display_title2--line_height--regular, 26px);
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title2--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-weight: 500;
+	font-weight: var(--vkui--font_display_title2--font_weight--regular, 500);
+}
+.vkui--font_display_title2 {
+	font-size: var(--vkui--font_display_title2--font_size);
+	line-height: var(--vkui--font_display_title2--line_height);
+	font-family: var(--vkui--font_display_title2--font_family);
+	font-weight: var(--vkui--font_display_title2--font_weight);
+}
+.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);
+	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;
+	font-weight: var(--vkui--font_display_title2--font_weight--compact, 500);
+}
+.vkui--font_display_title3--regular {
+	font-size: 19px;
+	font-size: var(--vkui--font_display_title3--font_size--regular, 19px);
+	line-height: 24px;
+	line-height: var(--vkui--font_display_title3--line_height--regular, 24px);
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title3--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-weight: 500;
+	font-weight: var(--vkui--font_display_title3--font_weight--regular, 500);
+}
+.vkui--font_display_title3 {
+	font-size: var(--vkui--font_display_title3--font_size);
+	line-height: var(--vkui--font_display_title3--line_height);
+	font-family: var(--vkui--font_display_title3--font_family);
+	font-weight: var(--vkui--font_display_title3--font_weight);
+}
+.vkui--font_display_title4--regular {
+	font-size: 17px;
+	font-size: var(--vkui--font_display_title4--font_size--regular, 17px);
+	line-height: 24px;
+	line-height: var(--vkui--font_display_title4--line_height--regular, 24px);
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title4--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-weight: 500;
+	font-weight: var(--vkui--font_display_title4--font_weight--regular, 500);
+}
+.vkui--font_display_title4 {
+	font-size: var(--vkui--font_display_title4--font_size);
+	line-height: var(--vkui--font_display_title4--line_height);
+	font-family: var(--vkui--font_display_title4--font_family);
+	font-weight: var(--vkui--font_display_title4--font_weight);
+}
 .vkui--font_title1--regular {
 	font-size: 24px;
 	font-size: var(--vkui--font_title1--font_size--regular, 24px);
@@ -1686,6 +1781,22 @@
 }
 
 :root {
+	--vkui--font_display_title1--font_size: 23px;
+	--vkui--font_display_title1--line_height: 28px;
+	--vkui--font_display_title1--font_family: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title1--font_weight: 500;
+	--vkui--font_display_title2--font_size: var(--vkui--font_display_title2--font_size--regular);
+	--vkui--font_display_title2--line_height: var(--vkui--font_display_title2--line_height--regular);
+	--vkui--font_display_title2--font_family: var(--vkui--font_display_title2--font_family--regular);
+	--vkui--font_display_title2--font_weight: var(--vkui--font_display_title2--font_weight--regular);
+	--vkui--font_display_title3--font_size: 19px;
+	--vkui--font_display_title3--line_height: 24px;
+	--vkui--font_display_title3--font_family: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title3--font_weight: 500;
+	--vkui--font_display_title4--font_size: 17px;
+	--vkui--font_display_title4--line_height: 24px;
+	--vkui--font_display_title4--font_family: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title4--font_weight: 500;
 	--vkui--font_title1--font_size: var(--vkui--font_title1--font_size--regular);
 	--vkui--font_title1--line_height: var(--vkui--font_title1--line_height--regular);
 	--vkui--font_title1--font_weight: var(--vkui--font_title1--font_weight--regular);
@@ -1805,7 +1916,7 @@
 	--vkui--size_switch_height: var(--vkui--size_switch_height--regular);
 	--vkui--size_switch_width: var(--vkui--size_switch_width--regular);
 	--vkui--size_switch_pin: var(--vkui--size_switch_pin--regular);
-	--vkui--size_panel_header_height: 56px;
+	--vkui--size_panel_header_height: var(--vkui--size_panel_header_height--regular);
 	--vkui--size_button_base_small_padding_horizontal: 16px;
 	--vkui--size_button_base_medium_padding_horizontal: 16px;
 	--vkui--size_button_base_large_padding_horizontal: 20px;
@@ -1906,7 +2017,11 @@
 
 @media (min-width: 768px) {
 				:root, .vkui--force-auto {
-					--vkui--font_title1--font_size: var(--vkui--font_title1--font_size--compact);
+					--vkui--font_display_title2--font_size: var(--vkui--font_display_title2--font_size--compact);
+--vkui--font_display_title2--line_height: var(--vkui--font_display_title2--line_height--compact);
+--vkui--font_display_title2--font_family: var(--vkui--font_display_title2--font_family--compact);
+--vkui--font_display_title2--font_weight: var(--vkui--font_display_title2--font_weight--compact);
+--vkui--font_title1--font_size: var(--vkui--font_title1--font_size--compact);
 --vkui--font_title1--line_height: var(--vkui--font_title1--line_height--compact);
 --vkui--font_title1--font_weight: var(--vkui--font_title1--font_weight--compact);
 --vkui--font_title1--font_family: var(--vkui--font_title1--font_family--compact);
@@ -1990,6 +2105,7 @@
 --vkui--size_switch_height: var(--vkui--size_switch_height--compact);
 --vkui--size_switch_width: var(--vkui--size_switch_width--compact);
 --vkui--size_switch_pin: var(--vkui--size_switch_pin--compact);
+--vkui--size_panel_header_height: var(--vkui--size_panel_header_height--compact);
 --vkui--font_h0--font_size: var(--vkui--font_h0--font_size--compact);
 --vkui--font_h0--line_height: var(--vkui--font_h0--line_height--compact);
 --vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);
@@ -2018,7 +2134,11 @@
 			}
 
 			.vkui--force-desktop_s {
-				--vkui--font_title1--font_size: var(--vkui--font_title1--font_size--compact);
+				--vkui--font_display_title2--font_size: var(--vkui--font_display_title2--font_size--compact);
+--vkui--font_display_title2--line_height: var(--vkui--font_display_title2--line_height--compact);
+--vkui--font_display_title2--font_family: var(--vkui--font_display_title2--font_family--compact);
+--vkui--font_display_title2--font_weight: var(--vkui--font_display_title2--font_weight--compact);
+--vkui--font_title1--font_size: var(--vkui--font_title1--font_size--compact);
 --vkui--font_title1--line_height: var(--vkui--font_title1--line_height--compact);
 --vkui--font_title1--font_weight: var(--vkui--font_title1--font_weight--compact);
 --vkui--font_title1--font_family: var(--vkui--font_title1--font_family--compact);
@@ -2102,6 +2222,7 @@
 --vkui--size_switch_height: var(--vkui--size_switch_height--compact);
 --vkui--size_switch_width: var(--vkui--size_switch_width--compact);
 --vkui--size_switch_pin: var(--vkui--size_switch_pin--compact);
+--vkui--size_panel_header_height: var(--vkui--size_panel_header_height--compact);
 --vkui--font_h0--font_size: var(--vkui--font_h0--font_size--compact);
 --vkui--font_h0--line_height: var(--vkui--font_h0--line_height--compact);
 --vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);
@@ -2130,7 +2251,11 @@
 
 @media (max-width: 767px) {
 				:root, .vkui--force-auto {
-					--vkui--font_title1--font_size: var(--vkui--font_title1--font_size--regular);
+					--vkui--font_display_title2--font_size: var(--vkui--font_display_title2--font_size--regular);
+--vkui--font_display_title2--line_height: var(--vkui--font_display_title2--line_height--regular);
+--vkui--font_display_title2--font_family: var(--vkui--font_display_title2--font_family--regular);
+--vkui--font_display_title2--font_weight: var(--vkui--font_display_title2--font_weight--regular);
+--vkui--font_title1--font_size: var(--vkui--font_title1--font_size--regular);
 --vkui--font_title1--line_height: var(--vkui--font_title1--line_height--regular);
 --vkui--font_title1--font_weight: var(--vkui--font_title1--font_weight--regular);
 --vkui--font_title1--font_family: var(--vkui--font_title1--font_family--regular);
@@ -2214,6 +2339,7 @@
 --vkui--size_switch_height: var(--vkui--size_switch_height--regular);
 --vkui--size_switch_width: var(--vkui--size_switch_width--regular);
 --vkui--size_switch_pin: var(--vkui--size_switch_pin--regular);
+--vkui--size_panel_header_height: var(--vkui--size_panel_header_height--regular);
 --vkui--font_h0--font_size: var(--vkui--font_h0--font_size--regular);
 --vkui--font_h0--line_height: var(--vkui--font_h0--line_height--regular);
 --vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);
@@ -2242,7 +2368,11 @@
 			}
 
 			.vkui--force-touch {
-				--vkui--font_title1--font_size: var(--vkui--font_title1--font_size--regular);
+				--vkui--font_display_title2--font_size: var(--vkui--font_display_title2--font_size--regular);
+--vkui--font_display_title2--line_height: var(--vkui--font_display_title2--line_height--regular);
+--vkui--font_display_title2--font_family: var(--vkui--font_display_title2--font_family--regular);
+--vkui--font_display_title2--font_weight: var(--vkui--font_display_title2--font_weight--regular);
+--vkui--font_title1--font_size: var(--vkui--font_title1--font_size--regular);
 --vkui--font_title1--line_height: var(--vkui--font_title1--line_height--regular);
 --vkui--font_title1--font_weight: var(--vkui--font_title1--font_weight--regular);
 --vkui--font_title1--font_family: var(--vkui--font_title1--font_family--regular);
@@ -2326,6 +2456,7 @@
 --vkui--size_switch_height: var(--vkui--size_switch_height--regular);
 --vkui--size_switch_width: var(--vkui--size_switch_width--regular);
 --vkui--size_switch_pin: var(--vkui--size_switch_pin--regular);
+--vkui--size_panel_header_height: var(--vkui--size_panel_header_height--regular);
 --vkui--font_h0--font_size: var(--vkui--font_h0--font_size--regular);
 --vkui--font_h0--line_height: var(--vkui--font_h0--line_height--regular);
 --vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);

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

@@ -9,6 +9,26 @@
 	--vkui--font_weight_base1: 700;
 	--vkui--font_weight_base2: 700;
 	--vkui--font_weight_base3: 400;
+	--vkui--font_display_title1--font_size--regular: 23px;
+	--vkui--font_display_title1--line_height--regular: 28px;
+	--vkui--font_display_title1--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title1--font_weight--regular: 500;
+	--vkui--font_display_title2--font_size--regular: 21px;
+	--vkui--font_display_title2--line_height--regular: 26px;
+	--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--font_family--compact: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title2--font_weight--compact: 500;
+	--vkui--font_display_title3--font_size--regular: 19px;
+	--vkui--font_display_title3--line_height--regular: 24px;
+	--vkui--font_display_title3--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title3--font_weight--regular: 500;
+	--vkui--font_display_title4--font_size--regular: 17px;
+	--vkui--font_display_title4--line_height--regular: 24px;
+	--vkui--font_display_title4--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title4--font_weight--regular: 500;
 	--vkui--font_title1--font_size--regular: 24px;
 	--vkui--font_title1--line_height--regular: 28px;
 	--vkui--font_title1--font_weight--regular: 500;
@@ -212,6 +232,7 @@
 	--vkui--size_switch_width--compact: 32px;
 	--vkui--size_switch_pin--regular: 20px;
 	--vkui--size_switch_pin--compact: 18px;
+	--vkui--size_panel_header_height--compact: 48px;
 	--vkui--size_panel_header_height--regular: 56px;
 	--vkui--size_button_base_small_padding_horizontal--regular: 16px;
 	--vkui--size_button_base_medium_padding_horizontal--regular: 16px;
@@ -390,6 +411,56 @@
 	--vkui--font_headline--font_family--compact: MailSans, Helvetica, Arial, sans-serif;
 }
 
+.vkui--font_display_title1--regular {
+	font-size: 23px;
+	font-size: var(--vkui--font_display_title1--font_size--regular, 23px);
+	line-height: 28px;
+	line-height: var(--vkui--font_display_title1--line_height--regular, 28px);
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title1--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-weight: 500;
+	font-weight: var(--vkui--font_display_title1--font_weight--regular, 500);
+}
+.vkui--font_display_title2--regular {
+	font-size: 21px;
+	font-size: var(--vkui--font_display_title2--font_size--regular, 21px);
+	line-height: 26px;
+	line-height: var(--vkui--font_display_title2--line_height--regular, 26px);
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title2--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-weight: 500;
+	font-weight: var(--vkui--font_display_title2--font_weight--regular, 500);
+}
+.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);
+	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;
+	font-weight: var(--vkui--font_display_title2--font_weight--compact, 500);
+}
+.vkui--font_display_title3--regular {
+	font-size: 19px;
+	font-size: var(--vkui--font_display_title3--font_size--regular, 19px);
+	line-height: 24px;
+	line-height: var(--vkui--font_display_title3--line_height--regular, 24px);
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title3--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-weight: 500;
+	font-weight: var(--vkui--font_display_title3--font_weight--regular, 500);
+}
+.vkui--font_display_title4--regular {
+	font-size: 17px;
+	font-size: var(--vkui--font_display_title4--font_size--regular, 17px);
+	line-height: 24px;
+	line-height: var(--vkui--font_display_title4--line_height--regular, 24px);
+	font-family: MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title4--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-weight: 500;
+	font-weight: var(--vkui--font_display_title4--font_weight--regular, 500);
+}
 .vkui--font_title1--regular {
 	font-size: 24px;
 	font-size: var(--vkui--font_title1--font_size--regular, 24px);

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

@@ -1,3 +1,27 @@
+.vkui--font_display_title1 {
+	font-size: var(--vkui--font_display_title1--font_size);
+	line-height: var(--vkui--font_display_title1--line_height);
+	font-family: var(--vkui--font_display_title1--font_family);
+	font-weight: var(--vkui--font_display_title1--font_weight);
+}
+.vkui--font_display_title2 {
+	font-size: var(--vkui--font_display_title2--font_size);
+	line-height: var(--vkui--font_display_title2--line_height);
+	font-family: var(--vkui--font_display_title2--font_family);
+	font-weight: var(--vkui--font_display_title2--font_weight);
+}
+.vkui--font_display_title3 {
+	font-size: var(--vkui--font_display_title3--font_size);
+	line-height: var(--vkui--font_display_title3--line_height);
+	font-family: var(--vkui--font_display_title3--font_family);
+	font-weight: var(--vkui--font_display_title3--font_weight);
+}
+.vkui--font_display_title4 {
+	font-size: var(--vkui--font_display_title4--font_size);
+	line-height: var(--vkui--font_display_title4--line_height);
+	font-family: var(--vkui--font_display_title4--font_family);
+	font-weight: var(--vkui--font_display_title4--font_weight);
+}
 .vkui--font_title1 {
 	font-size: var(--vkui--font_title1--font_size);
 	line-height: var(--vkui--font_title1--line_height);