@vkontakte/vkui-tokens 4.49.1-dev-c94f02.0 → 4.50.1-dev-d3fb91.0

package/build/helpers/getGradientPointsFromColor.js

@@ -9,10 +9,10 @@ function getGradientPointsFromColor(colorArg, opacityMultiplier) {
     if (opacityMultiplier === void 0) { opacityMultiplier = 1; }
     var opacityMap = [
         [0, 0],
-        [0.036, 13],
-        [0.15, 27],
-        [0.79, 68],
-        [0.95, 84],
+        [0.05, 15],
+        [0.2, 30],
+        [0.8, 70],
+        [0.95, 85],
         [1, 100],
     ];
     var colorRGB = (0, color_1.default)(colorArg).rgb().array().join(', ');

package/build/helpers/getGradientPointsFromColor.test.js

@@ -5,10 +5,10 @@ var getGradientPointsFromColor_1 = require("./getGradientPointsFromColor");
 (0, globals_1.describe)('getGradientPointsFromColor', function () {
     (0, globals_1.it)('should generate gradient from color', function () {
         (0, globals_1.expect)((0, getGradientPointsFromColor_1.getGradientPointsFromColor)('rgb(0, 100, 200)')).toEqual('rgba(0, 100, 200, 0) 0%, ' +
-            'rgba(0, 100, 200, 0.036) 13%, ' +
-            'rgba(0, 100, 200, 0.15) 27%, ' +
-            'rgba(0, 100, 200, 0.79) 68%, ' +
-            'rgba(0, 100, 200, 0.95) 84%, ' +
+            'rgba(0, 100, 200, 0.05) 15%, ' +
+            'rgba(0, 100, 200, 0.2) 30%, ' +
+            'rgba(0, 100, 200, 0.8) 70%, ' +
+            'rgba(0, 100, 200, 0.95) 85%, ' +
             'rgba(0, 100, 200, 1) 100%');
     });
 });

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

@@ -387,10 +387,10 @@ export interface ColorsDescriptionStruct {
      */
     colorAccentRed: ColorDescription;
     /**
-     * @desc Палитра цветов. Зелёный цвет
+     * @desc Палитра цветов. Огненно оранжевый цвет
      * @tags color, palette
      */
-    colorAccentGreen: ColorDescription;
+    colorAccentOrangeFire: ColorDescription;
     /**
      * @desc Палитра цветов. Оранжевый цвет
      * @tags color, palette
@@ -402,10 +402,25 @@ export interface ColorsDescriptionStruct {
      */
     colorAccentOrangePeach: ColorDescription;
     /**
-     * @desc Палитра цветов. Огненно оранжевый цвет
+     * @desc Палитра цветов. Лаймовый цвет
      * @tags color, palette
      */
-    colorAccentOrangeFire: ColorDescription;
+    colorAccentLime: ColorDescription;
+    /**
+     * @desc Палитра цветов. Зелёный цвет
+     * @tags color, palette
+     */
+    colorAccentGreen: ColorDescription;
+    /**
+     * @desc Палитра цветов. Циановый цвет
+     * @tags color, palette
+     */
+    colorAccentCyan: ColorDescription;
+    /**
+     * @desc Палитра цветов. Лазурный цвет
+     * @tags color, palette
+     */
+    colorAccentAzure: ColorDescription;
     /**
      * @desc Палитра цветов. Фиолетовый цвет
      * @tags color, palette
@@ -417,10 +432,15 @@ export interface ColorsDescriptionStruct {
      */
     colorAccentViolet: ColorDescription;
     /**
-     * @desc Палитра цветов. Розовый цвет
+     * @desc Палитра цветов. Розово-малиновый цвет
      * @tags color, palette
      */
     colorAccentRaspberryPink: ColorDescription;
+    /**
+     * @desc Палитра цветов. Розовый цвет
+     * @tags color, palette
+     */
+    colorAccentPink: ColorDescription;
     /**
      * @desc Второстепенный акцентный цвет для отдельных проектов
      * @tags color, palette

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

@@ -1,8 +1,20 @@
 import { ThemeCssVars } from '../../general';
-import { ParadigmTheme, ParadigmThemeDescription } from '../../namespaces/paradigm';
-export interface ThemeWorkspaceAdmin extends ParadigmTheme {
+import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
+import { Font } from '../../general/typography';
+import { LocalParadigmColorsDescriptionStruct, ParadigmTheme, ParadigmThemeDescription } from '../../namespaces/paradigm';
+export interface ThemeWorkspaceOverValues {
+    fontHeadline3: Font;
 }
-export interface ThemeWorkspaceAdminDescription extends ParadigmThemeDescription {
+export interface LocalWorkspaceAdminColorsDescriptionStruct {
+    colorIconNegativeSnackbar: ColorDescription;
+}
+export type WorkspaceAdminLocalColors = {
+    [key in keyof LocalWorkspaceAdminColorsDescriptionStruct]: ColorWithStates;
+};
+export interface ThemeWorkspaceAdmin extends ParadigmTheme, ThemeWorkspaceOverValues, WorkspaceAdminLocalColors {
+}
+export interface ThemeWorkspaceAdminDescription extends ParadigmThemeDescription, ThemeWorkspaceOverValues {
+    colors: LocalWorkspaceAdminColorsDescriptionStruct & LocalParadigmColorsDescriptionStruct & ColorsDescriptionStruct;
 }
 export interface ThemeWorkspaceAdminCssVars extends ThemeCssVars<ThemeWorkspaceAdmin, 'breakpoints'> {
 }

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

@@ -0,0 +1,4 @@
+import { ThemeWorkspaceAdmin, ThemeWorkspaceAdminCssVars, ThemeWorkspaceAdminDescription } from '../workspaceAdmin';
+export type ThemeWorkspaceAdminDark = ThemeWorkspaceAdmin;
+export type ThemeWorkspaceAdminDarkDescription = ThemeWorkspaceAdminDescription;
+export type ThemeWorkspaceAdminDarkCssVars = ThemeWorkspaceAdminCssVars;

package/interfaces/themes/workspaceAdminDark/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.49.1-dev-c94f02.0",
+  "version": "4.50.1-dev-d3fb91.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -57,7 +57,7 @@
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.14.2",
     "@vkontakte/vkjs": "1.2.0",
-    "@vkontakte/vkui": "6.2.0",
+    "@vkontakte/vkui": "6.3.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "clean-webpack-plugin": "4.0.0",
@@ -81,7 +81,7 @@
     "eslint-plugin-unicorn": "51.0.1",
     "fs-extra": "11.2.0",
     "html-webpack-plugin": "5.6.0",
-    "husky": "9.0.11",
+    "husky": "9.1.3",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
     "lint-staged": "15.2.7",
@@ -98,7 +98,7 @@
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tscpaths": "0.0.9",
-    "type-fest": "4.20.1",
+    "type-fest": "4.23.0",
     "typescript": "5.2.2",
     "typescript-eslint": "7.0.1",
     "webpack": "5.92.1",

package/themeDescriptions/base/paradigm.js

@@ -17,7 +17,7 @@ var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
 var overlayColors_1 = require("../../build/themeProcessors/expandColors/overlayColors");
 var common_1 = require("../../utils/common");
 var fontFamilyFallbacks = 'Helvetica, Arial, sans-serif';
-var fontFamilyAccent = "MailSans, ".concat(fontFamilyFallbacks);
+var fontFamilyAccent = "VKSansDisplay, MailSans, ".concat(fontFamilyFallbacks);
 var fontFamilyBase = fontFamilyFallbacks;
 var fontWeightAccent1 = 500;
 var fontWeightAccent2 = 500;
@@ -120,13 +120,17 @@ exports.lightColors = {
         colorAccentBlue: '#005FF9',
         colorAccentGray: '#A5A7AD',
         colorAccentRed: '#ED0A34',
-        colorAccentGreen: '#0DC268',
+        colorAccentOrangeFire: '#F05C44',
         colorAccentOrange: '#FF9E00',
         colorAccentOrangePeach: '#F9B54F',
-        colorAccentOrangeFire: '#F05C44',
+        colorAccentLime: '#B8FC75',
+        colorAccentGreen: '#0DC268',
+        colorAccentCyan: '#07E5F9',
+        colorAccentAzure: '#0077FF',
         colorAccentPurple: '#4F6DDC',
         colorAccentViolet: '#C15DF3',
         colorAccentRaspberryPink: '#E03FAB',
+        colorAccentPink: '#FF3985',
         colorAccentSecondary: '#FF9E00',
         // Other
         colorActionSheetText: '#005FF9',
@@ -247,13 +251,17 @@ exports.darkColors = {
         colorAccentBlue: '#2775FC',
         colorAccentGray: '#9C9DA2',
         colorAccentRed: '#ED0A34',
-        colorAccentGreen: '#0DC268',
+        colorAccentOrangeFire: '#F05C44',
         colorAccentOrange: '#FF9E00',
         colorAccentOrangePeach: '#FFC062',
-        colorAccentOrangeFire: '#F05C44',
+        colorAccentLime: '#B8FC75',
+        colorAccentGreen: '#0DC268',
+        colorAccentCyan: '#07E5F9',
+        colorAccentAzure: '#0077FF',
         colorAccentPurple: '#4F6DDC',
         colorAccentViolet: '#C15DF3',
         colorAccentRaspberryPink: '#F060C0',
+        colorAccentPink: '#FF3985',
         colorAccentSecondary: '#FF9E00',
         // Other
         colorActionSheetText: '#3C82FD',

package/themeDescriptions/base/vk.js

@@ -188,16 +188,32 @@ var colorFromFigma = function (colorsScheme) {
             colorAccentBlue: palette.accent_blue,
             colorAccentGray: palette.accent_gray,
             colorAccentRed: palette.accent_red,
-            colorAccentGreen: palette.accent_green,
+            colorAccentOrangeFire: palette.accent_orange_fire,
             colorAccentOrange: palette.accent_orange,
             colorAccentOrangePeach: {
                 light: '#F9B54F',
                 dark: '#FFC062',
             }[colorsScheme],
-            colorAccentOrangeFire: palette.accent_orange_fire,
+            colorAccentLime: {
+                light: '#AFF70D',
+                dark: '#AFF70D',
+            }[colorsScheme],
+            colorAccentGreen: palette.accent_green,
+            colorAccentCyan: {
+                light: '#13FFD0',
+                dark: '#13FFD0',
+            }[colorsScheme],
+            colorAccentAzure: {
+                light: '#0077FF',
+                dark: '#0077FF',
+            }[colorsScheme],
             colorAccentPurple: palette.accent_purple,
             colorAccentViolet: palette.accent_violet,
             colorAccentRaspberryPink: palette.accent_raspberry_pink,
+            colorAccentPink: {
+                light: '#F45FFF',
+                dark: '#F45FFF',
+            }[colorsScheme],
             colorAccentSecondary: palette.accent_secondary,
             // Other
             colorOverlayPrimary: other.overlay_primary,
@@ -326,32 +342,32 @@ exports.fonts = {
         regular: {
             fontSize: 24,
             lineHeight: 28,
-            fontFamily: fontFamilyAccent,
-            fontWeight: fontWeightAccent1,
+            fontFamily: fontFamilyBase,
+            fontWeight: fontWeightBase1,
         },
     },
     fontTitle2: {
         regular: {
             fontSize: 20,
             lineHeight: 24,
-            fontFamily: fontFamilyAccent,
-            fontWeight: fontWeightAccent1,
+            fontFamily: fontFamilyBase,
+            fontWeight: fontWeightBase1,
         },
     },
     fontTitle3: {
         regular: {
             fontSize: 17,
             lineHeight: 22,
-            fontFamily: fontFamilyAccent,
-            fontWeight: fontWeightAccent1,
+            fontFamily: fontFamilyBase,
+            fontWeight: fontWeightBase1,
         },
     },
     fontHeadline1: {
         regular: {
             fontSize: 16,
             lineHeight: 20,
-            fontFamily: fontFamilyAccent,
-            fontWeight: fontWeightAccent2,
+            fontFamily: fontFamilyBase,
+            fontWeight: fontWeightBase2,
         },
         compact: {
             fontSize: 15,
@@ -362,8 +378,8 @@ exports.fonts = {
         regular: {
             fontSize: 15,
             lineHeight: 20,
-            fontFamily: fontFamilyAccent,
-            fontWeight: fontWeightAccent2,
+            fontFamily: fontFamilyBase,
+            fontWeight: fontWeightBase2,
         },
         compact: {
             fontSize: 14,

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

@@ -11,23 +11,23 @@
 	--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_family--regular: VKSansDisplay, 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_family--regular: VKSansDisplay, 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: 22px;
-	--vkui--font_display_title2--font_family--compact: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_display_title2--font_family--compact: VKSansDisplay, 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_family--regular: VKSansDisplay, 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_family--regular: VKSansDisplay, 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;
@@ -63,7 +63,7 @@
 	--vkui--font_headline1--font_family--compact: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_headline2--font_size--regular: 15px;
 	--vkui--font_headline2--line_height--regular: 20px;
-	--vkui--font_headline2--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_headline2--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_headline2--font_weight--regular: 500;
 	--vkui--font_headline2--font_size--compact: 14px;
 	--vkui--font_headline2--line_height--compact: 20px;
@@ -269,10 +269,10 @@
 	--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);
 	--vkui--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);
 	--vkui--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);
-	--vkui--gradient_black: rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) 100%;
-	--vkui--gradient_white: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.036) 13%, rgba(255, 255, 255, 0.15) 27%, rgba(255, 255, 255, 0.79) 68%, rgba(255, 255, 255, 0.95) 84%, rgba(255, 255, 255, 1) 100%;
-	--vkui--gradient_tint: rgba(246, 247, 248, 0) 0%, rgba(246, 247, 248, 0.036) 13%, rgba(246, 247, 248, 0.15) 27%, rgba(246, 247, 248, 0.79) 68%, rgba(246, 247, 248, 0.95) 84%, rgba(246, 247, 248, 1) 100%;
-	--vkui--gradient: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.036) 13%, rgba(255, 255, 255, 0.15) 27%, rgba(255, 255, 255, 0.79) 68%, rgba(255, 255, 255, 0.95) 84%, rgba(255, 255, 255, 1) 100%;
+	--vkui--gradient_black: rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%;
+	--vkui--gradient_white: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%;
+	--vkui--gradient_tint: rgba(246, 247, 248, 0) 0%, rgba(246, 247, 248, 0.05) 15%, rgba(246, 247, 248, 0.2) 30%, rgba(246, 247, 248, 0.8) 70%, rgba(246, 247, 248, 0.95) 85%, rgba(246, 247, 248, 1) 100%;
+	--vkui--gradient: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%;
 	--vkui--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;
@@ -300,19 +300,19 @@
 	--vkui--size_grid: 20px;
 	--vkui--font_h0--font_size--regular: 28px;
 	--vkui--font_h0--line_height--regular: 32px;
-	--vkui--font_h0--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_h0--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_h0--font_weight--regular: 500;
 	--vkui--font_h0--font_size--compact: 44px;
 	--vkui--font_h0--line_height--compact: 52px;
 	--vkui--font_h1--font_size--regular: 24px;
 	--vkui--font_h1--line_height--regular: 28px;
-	--vkui--font_h1--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_h1--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_h1--font_weight--regular: 500;
 	--vkui--font_h1--font_size--compact: 32px;
 	--vkui--font_h1--line_height--compact: 36px;
 	--vkui--font_h2--font_size--regular: 20px;
 	--vkui--font_h2--line_height--regular: 26px;
-	--vkui--font_h2--font_family--regular: MailSans, Helvetica, Arial, sans-serif;
+	--vkui--font_h2--font_family--regular: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_h2--font_weight--regular: 500;
 	--vkui--font_h2--font_size--compact: 28px;
 	--vkui--font_h2--line_height--compact: 32px;
@@ -631,18 +631,27 @@
 	--vkui--color_accent_red: #ED0A34;
 	--vkui--color_accent_red--hover: #E40A34;
 	--vkui--color_accent_red--active: #DA0A35;
-	--vkui--color_accent_green: #0DC268;
-	--vkui--color_accent_green--hover: #0CBB66;
-	--vkui--color_accent_green--active: #0CB465;
+	--vkui--color_accent_orange_fire: #F05C44;
+	--vkui--color_accent_orange_fire--hover: #E65944;
+	--vkui--color_accent_orange_fire--active: #DD5643;
 	--vkui--color_accent_orange: #FF9E00;
 	--vkui--color_accent_orange--hover: #F59802;
 	--vkui--color_accent_orange--active: #EB9305;
 	--vkui--color_accent_orange_peach: #F9B54F;
 	--vkui--color_accent_orange_peach--hover: #EFAE4E;
 	--vkui--color_accent_orange_peach--active: #E5A84E;
-	--vkui--color_accent_orange_fire: #F05C44;
-	--vkui--color_accent_orange_fire--hover: #E65944;
-	--vkui--color_accent_orange_fire--active: #DD5643;
+	--vkui--color_accent_lime: #B8FC75;
+	--vkui--color_accent_lime--hover: #B1F373;
+	--vkui--color_accent_lime--active: #A9E971;
+	--vkui--color_accent_green: #0DC268;
+	--vkui--color_accent_green--hover: #0CBB66;
+	--vkui--color_accent_green--active: #0CB465;
+	--vkui--color_accent_cyan: #07E5F9;
+	--vkui--color_accent_cyan--hover: #07DCF1;
+	--vkui--color_accent_cyan--active: #06D4EA;
+	--vkui--color_accent_azure: #0077FF;
+	--vkui--color_accent_azure--hover: #0073F7;
+	--vkui--color_accent_azure--active: #006FEF;
 	--vkui--color_accent_purple: #4F6DDC;
 	--vkui--color_accent_purple--hover: #4C69D6;
 	--vkui--color_accent_purple--active: #4966CF;
@@ -652,6 +661,9 @@
 	--vkui--color_accent_raspberry_pink: #E03FAB;
 	--vkui--color_accent_raspberry_pink--hover: #D73DA7;
 	--vkui--color_accent_raspberry_pink--active: #CE3BA2;
+	--vkui--color_accent_pink: #FF3985;
+	--vkui--color_accent_pink--hover: #F53782;
+	--vkui--color_accent_pink--active: #EB367F;
 	--vkui--color_accent_secondary: #FF9E00;
 	--vkui--color_accent_secondary--hover: #F59802;
 	--vkui--color_accent_secondary--active: #EB9305;
@@ -1154,8 +1166,8 @@
 	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-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title1--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_display_title1--font_weight--regular, 500);
 }
@@ -1170,8 +1182,8 @@
 	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-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title2--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_display_title2--font_weight--regular, 500);
 }
@@ -1186,8 +1198,8 @@
 	font-size: var(--vkui--font_display_title2--font_size--compact, 22px);
 	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-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title2--font_family--compact, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_display_title2--font_weight--compact, 500);
 }
@@ -1196,8 +1208,8 @@
 	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-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title3--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_display_title3--font_weight--regular, 500);
 }
@@ -1212,8 +1224,8 @@
 	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-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_display_title4--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_display_title4--font_weight--regular, 500);
 }
@@ -1332,8 +1344,8 @@
 	font-size: var(--vkui--font_headline2--font_size--regular, 15px);
 	line-height: 20px;
 	line-height: var(--vkui--font_headline2--line_height--regular, 20px);
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	font-family: var(--vkui--font_headline2--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_headline2--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_headline2--font_weight--regular, 500);
 }
@@ -1348,8 +1360,8 @@
 	font-size: var(--vkui--font_headline2--font_size--compact, 14px);
 	line-height: 20px;
 	line-height: var(--vkui--font_headline2--line_height--compact, 20px);
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	font-family: var(--vkui--font_headline2--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_headline2--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_headline2--font_weight--regular, 500);
 }
@@ -1684,8 +1696,8 @@
 	font-size: var(--vkui--font_h0--font_size--regular, 28px);
 	line-height: 32px;
 	line-height: var(--vkui--font_h0--line_height--regular, 32px);
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	font-family: var(--vkui--font_h0--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_h0--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_h0--font_weight--regular, 500);
 }
@@ -1700,8 +1712,8 @@
 	font-size: var(--vkui--font_h0--font_size--compact, 44px);
 	line-height: 52px;
 	line-height: var(--vkui--font_h0--line_height--compact, 52px);
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	font-family: var(--vkui--font_h0--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_h0--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_h0--font_weight--regular, 500);
 }
@@ -1710,8 +1722,8 @@
 	font-size: var(--vkui--font_h1--font_size--regular, 24px);
 	line-height: 28px;
 	line-height: var(--vkui--font_h1--line_height--regular, 28px);
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	font-family: var(--vkui--font_h1--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_h1--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_h1--font_weight--regular, 500);
 }
@@ -1726,8 +1738,8 @@
 	font-size: var(--vkui--font_h1--font_size--compact, 32px);
 	line-height: 36px;
 	line-height: var(--vkui--font_h1--line_height--compact, 36px);
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	font-family: var(--vkui--font_h1--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_h1--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_h1--font_weight--regular, 500);
 }
@@ -1736,8 +1748,8 @@
 	font-size: var(--vkui--font_h2--font_size--regular, 20px);
 	line-height: 26px;
 	line-height: var(--vkui--font_h2--line_height--regular, 26px);
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	font-family: var(--vkui--font_h2--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_h2--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_h2--font_weight--regular, 500);
 }
@@ -1752,8 +1764,8 @@
 	font-size: var(--vkui--font_h2--font_size--compact, 28px);
 	line-height: 32px;
 	line-height: var(--vkui--font_h2--line_height--compact, 32px);
-	font-family: MailSans, Helvetica, Arial, sans-serif;
-	font-family: var(--vkui--font_h2--font_family--regular, MailSans, Helvetica, Arial, sans-serif);
+	font-family: VKSansDisplay, MailSans, Helvetica, Arial, sans-serif;
+	font-family: var(--vkui--font_h2--font_family--regular, VKSansDisplay, MailSans, Helvetica, Arial, sans-serif);
 	font-weight: 500;
 	font-weight: var(--vkui--font_h2--font_weight--regular, 500);
 }
@@ -1839,7 +1851,7 @@
 :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_family: VKSansDisplay, 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);
@@ -1847,11 +1859,11 @@
 	--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_family: VKSansDisplay, 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_family: VKSansDisplay, 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);