@vkontakte/vkui-tokens 4.12.1 → 4.13.0

package/build/helpers/getGradientPointsFromColor.d.ts

@@ -0,0 +1,3 @@
+import { Property } from 'csstype';
+import { GradientPoints } from '../../interfaces/general/gradients';
+export declare function getGradientPointsFromColor(colorArg: Property.Color, opacityMultiplier?: number): GradientPoints;

package/build/helpers/getGradientPointsFromColor.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGradientPointsFromColor = void 0;
+var color_1 = __importDefault(require("color"));
+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],
+        [1, 100],
+    ];
+    var colorRGB = color_1.default(colorArg).rgb().array().join(', ');
+    return opacityMap
+        .map(function (_a) {
+        var pointOpacity = _a[0], pointCoordinate = _a[1];
+        return "rgba(" + colorRGB + ", " + Math.round(pointOpacity * opacityMultiplier * 1000) / 1000 + ") " + pointCoordinate + "%";
+    })
+        .join(', ');
+}
+exports.getGradientPointsFromColor = getGradientPointsFromColor;

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

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

package/build/helpers/getGradientPointsFromColor.test.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var getGradientPointsFromColor_1 = require("./getGradientPointsFromColor");
+describe('getGradientPointsFromColor', function () {
+    it('should generate gradient from color', function () {
+        expect(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, 1) 100%');
+    });
+});

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

@@ -0,0 +1,6 @@
+export declare type GradientPoints = string;
+export interface Gradients {
+    gradientBlack: GradientPoints;
+    gradientWhite: GradientPoints;
+    gradientTint: GradientPoints;
+}

package/interfaces/general/gradients/index.js

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

package/interfaces/general/index.d.ts

@@ -3,6 +3,7 @@ import { Animations } from './animations';
 import { ColorDescription, Colors, ColorsDescriptionStruct } from './colors';
 import { Elevation } from './elevation';
 import { Sizes } from './geometry';
+import { Gradients } from './gradients';
 import { ToneValues } from './toneValues';
 import { Adaptive } from './tools';
 import { NamifyObject } from './tools/cssVars';
@@ -37,7 +38,7 @@ export interface WithThemeType {
 /**
  * Общий интерефейс между описанием и самой темой
  */
-export interface ThemeGeneral extends AdaptiveTokens, SpecialTokens, ToneValues, TypographyBaseProps, Elevation, Animations {
+export interface ThemeGeneral extends AdaptiveTokens, SpecialTokens, ToneValues, TypographyBaseProps, Elevation, Gradients, Animations {
 }
 /**
  * Интерфейс описания Темы (в этом типе описываются все темы дизайн-системы)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.12.1",
+  "version": "4.13.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -63,7 +63,7 @@
     "typescript": "4.2.4"
   },
   "engines": {
-    "npm": "8.5.5",
-    "yarn": ">=1.21.1 <=1.22.18"
+    "npm": "^8.5.5",
+    "yarn": "^1.21.1"
   }
 }

package/themeDescriptions/base/paradigm.js

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.darkTheme = exports.darkThemeBase = exports.darkThemeElevation = exports.lightTheme = exports.lightThemeBase = exports.darkColors = exports.lightColors = void 0;
+var getGradientPointsFromColor_1 = require("../../build/helpers/getGradientPointsFromColor");
 var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
 var overlayColors_1 = require("../../build/themeProcessors/expandColors/overlayColors");
 var common_1 = require("../../utils/common");
@@ -23,6 +24,8 @@ var fontWeightAccent3 = 400;
 var fontWeightBase1 = 700;
 var fontWeightBase2 = 700;
 var fontWeightBase3 = 400;
+var colorBackgroundTertiaryLight = '#F9F9FA';
+var colorBackgroundTertiaryDark = '#252525';
 exports.lightColors = {
     colorsScheme: 'light',
     colors: {
@@ -42,7 +45,7 @@ exports.lightColors = {
         colorBackgroundContrastSecondaryAlpha: 'rgba(255, 255, 255, 0.20)',
         colorBackgroundWarning: '#FFF1AD',
         colorBackgroundNegative: '#ED0A34',
-        colorBackgroundTertiary: '#F9F9FA',
+        colorBackgroundTertiary: colorBackgroundTertiaryLight,
         colorBackgroundModal: '#FFFFFF',
         colorBackgroundPositive: '#0DC268',
         colorBackgroundNegativeTint: '#FAEBEB',
@@ -133,7 +136,7 @@ exports.darkColors = {
             hover: 'rgba(255, 255, 255, 0.16)',
             active: 'rgba(255, 255, 255, 0.2)',
         },
-        colorBackgroundTertiary: '#252525',
+        colorBackgroundTertiary: colorBackgroundTertiaryDark,
         colorBackground: '#19191A',
         colorBackgroundContrast: '#FFFFFF',
         colorBackgroundContrastSecondaryAlpha: 'rgba(255, 255, 255, 0.20)',
@@ -379,7 +382,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         regular: 16,
         compact: 24,
     }, sizeBorderRadius: {
-        regular: 4,
+        regular: 8,
     }, sizeCheckBorderRadius: {
         regular: 4,
     }, sizeBorderRadiusPaper: {
@@ -516,7 +519,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         regular: 16,
     }, 
     // Прочие отступы
-    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)', animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: '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: getGradientPointsFromColor_1.getGradientPointsFromColor('#000000', 0.4), gradientWhite: getGradientPointsFromColor_1.getGradientPointsFromColor('#FFFFFF'), gradientTint: getGradientPointsFromColor_1.getGradientPointsFromColor(colorBackgroundTertiaryLight), animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.48, opacityDisableAccessibility: 0.64 });
 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)',
@@ -694,7 +697,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), { themeName: 'paradigmBaseDark' }), exports.darkColors), exports.darkThemeElevation);
+exports.darkThemeBase = __assign(__assign(__assign(__assign({}, exports.lightThemeBase), { gradientTint: getGradientPointsFromColor_1.getGradientPointsFromColor(colorBackgroundTertiaryDark), 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

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.darkTheme = exports.lightTheme = exports.darkColors = exports.lightColors = void 0;
+var getGradientPointsFromColor_1 = require("../../build/helpers/getGradientPointsFromColor");
 var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
 var fontFamilyAccent = '"TT Commons", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif';
 var fontFamilyBase = '-apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif';
@@ -21,6 +22,8 @@ var fontWeightAccent3 = 400;
 var fontWeightBase1 = 600;
 var fontWeightBase2 = 500;
 var fontWeightBase3 = 400;
+var colorBackgroundTertiaryLight = '#F9F9F9';
+var colorBackgroundTertiaryDark = '#202021';
 exports.lightColors = {
     colorsScheme: 'light',
     colors: {
@@ -41,7 +44,7 @@ exports.lightColors = {
             hover: 'rgba(0, 0, 0, 0.08)',
             active: 'rgba(0, 0, 0, 0.12)',
         },
-        colorBackgroundTertiary: '#F9F9F9',
+        colorBackgroundTertiary: colorBackgroundTertiaryLight,
         colorBackground: '#EBEDF0',
         colorBackgroundContrast: '#FFFFFF',
         colorBackgroundContrastSecondaryAlpha: 'rgba(255, 255, 255, 0.20)',
@@ -135,16 +138,16 @@ exports.darkColors = {
             hover: 'rgba(255, 255, 255, 0.08)',
             active: 'rgba(255, 255, 255, 0.12)',
         },
-        colorBackgroundTertiary: '#202021',
+        colorBackgroundTertiary: colorBackgroundTertiaryDark,
         colorBackground: '#0A0A0A',
         colorBackgroundContrast: '#FFFFFF',
         colorBackgroundContrastSecondaryAlpha: 'rgba(255, 255, 255, 0.20)',
-        colorBackgroundWarning: '#6C4A00',
-        colorBackgroundNegative: '#E64646',
+        colorBackgroundNegative: '#FF5C5C',
+        colorBackgroundWarning: '#887244',
         colorBackgroundNegativeTint: '#522E2E',
-        colorTextNegative: '#E64646',
-        colorIconNegative: '#E64646',
-        colorStrokeNegative: '#E64646',
+        colorTextNegative: '#FF5C5C',
+        colorIconNegative: '#FF5C5C',
+        colorStrokeNegative: '#FF5C5C',
         colorHeaderBackground: '#19191A',
         colorPanelHeaderIcon: '#71AAEB',
         colorIconPrimary: '#E1E3E6',
@@ -159,7 +162,7 @@ exports.darkColors = {
         colorImageBorderAlpha: 'rgba(255, 255, 255, 0.08)',
         colorWriteBarInputBackground: '#232324',
         colorWriteBarInputBorderAlpha: 'rgba(255, 255, 255, 0.8)',
-        colorTrackBackground: '#202021',
+        colorTrackBackground: '#454647',
         colorTrackBuffer: '#405772',
         colorBackgroundModal: '#2D2D2E',
         colorImagePlaceholderAlpha: 'rgba(241, 247, 255, 0.08)',
@@ -167,9 +170,9 @@ exports.darkColors = {
         colorSearchFieldBackground: '#232324',
         colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.12)',
         colorFieldBackground: '#292929',
-        colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.4)',
+        colorSeparatorPrimaryAlpha: 'rgba(255, 255, 255, 0.12)',
         colorSeparatorSecondary: '#141415',
-        colorSeparatorPrimary: '#0F0F10',
+        colorSeparatorPrimary: '#363738',
         colorTextLink: '#529EF4',
         colorTextLinkThemed: '#FFFFFF',
         colorTextMuted: '#E1E3E6',
@@ -516,7 +519,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
         regular: 16,
     }, 
     // Прочие отступы
-    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)', animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.4, opacityDisableAccessibility: 0.64 });
+    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)', gradientBlack: getGradientPointsFromColor_1.getGradientPointsFromColor('#000000', 0.4), gradientWhite: getGradientPointsFromColor_1.getGradientPointsFromColor('#FFFFFF'), gradientTint: getGradientPointsFromColor_1.getGradientPointsFromColor(colorBackgroundTertiaryLight), animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.4, opacityDisableAccessibility: 0.64 });
 exports.darkTheme = __assign(__assign(__assign({}, exports.lightTheme), exports.darkColors), { themeName: 'vkBaseDark', themeInheritsFrom: 'vkBase', colorsScheme: 'dark', 
     // TODO: Поставить нормальные отступы из тёмной темы
-    elevation1: '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 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)', gradientTint: getGradientPointsFromColor_1.getGradientPointsFromColor(colorBackgroundTertiaryDark) });

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

@@ -228,6 +228,9 @@
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 	--vkui--elevation3: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
 	--vkui--elevation4: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
+	--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(249, 249, 250, 0) 0%, rgba(249, 249, 250, 0.036) 13%, rgba(249, 249, 250, 0.15) 27%, rgba(249, 249, 250, 0.79) 68%, rgba(249, 249, 250, 0.95) 84%, rgba(249, 249, 250, 1) 100%;
 	--vkui--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;

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

@@ -228,6 +228,9 @@
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 	--vkui--elevation3: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
 	--vkui--elevation4: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
+	--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(249, 249, 250, 0) 0%, rgba(249, 249, 250, 0.036) 13%, rgba(249, 249, 250, 0.15) 27%, rgba(249, 249, 250, 0.79) 68%, rgba(249, 249, 250, 0.95) 84%, rgba(249, 249, 250, 1) 100%;
 	--vkui--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;

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

@@ -5,6 +5,9 @@
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 	--vkui--elevation3: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
 	--vkui--elevation4: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
+	--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(249, 249, 250, 0) 0%, rgba(249, 249, 250, 0.036) 13%, rgba(249, 249, 250, 0.15) 27%, rgba(249, 249, 250, 0.79) 68%, rgba(249, 249, 250, 0.95) 84%, rgba(249, 249, 250, 1) 100%;
 	--vkui--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;

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

@@ -228,6 +228,9 @@
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
 	--vkui--elevation3: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
 	--vkui--elevation4: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
+	--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(249, 249, 250, 0) 0%, rgba(249, 249, 250, 0.036) 13%, rgba(249, 249, 250, 0.15) 27%, rgba(249, 249, 250, 0.79) 68%, rgba(249, 249, 250, 0.95) 84%, rgba(249, 249, 250, 1) 100%;
 	--vkui--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;