@vkontakte/vkui-tokens 4.2.0 → 4.3.1-dev-d4a11c.0

package/build/compilers/styles/compileStyles.d.ts

@@ -8,4 +8,4 @@ export declare function getRootSelector<PT extends PixelifyTheme>(theme: PT, mod
 /**
  * Компиллирует строку со стилями (в разных форматах), на основе темы
  */
-export declare const compileStyles: <PT extends PixelifyTheme<import("../../../interfaces/general").Theme> = PixelifyTheme<import("../../../interfaces/general").Theme>>(format: Formats, theme: PT, mode?: CompileStylesMode) => string;
+export declare const compileStyles: <PT extends PixelifyTheme<import("../../../interfaces/general/tools/tokenValue").StaticTokens<import("../../../interfaces/general").Theme>> = PixelifyTheme<import("../../../interfaces/general/tools/tokenValue").StaticTokens<import("../../../interfaces/general").Theme>>>(format: Formats, theme: PT, mode?: CompileStylesMode) => string;

package/build/expandTheme.d.ts

@@ -1,17 +1,18 @@
 import { PixelifyTheme, Theme, ThemeCssVars, ThemeCssVarsWide, ThemeDescription } from '../interfaces/general';
+import { StaticTokens } from '../interfaces/general/tools/tokenValue';
 export interface ExpandedThemeObject<T = Theme> {
-    theme: T;
-    pixelifyTheme: PixelifyTheme<T>;
-    cssVarsThemeWide: ThemeCssVarsWide<T>;
-    cssVarsTheme: ThemeCssVars<T>;
-    pseudoThemeCssVars: PixelifyTheme<T>;
+    theme: StaticTokens<T>;
+    pixelifyTheme: StaticTokens<PixelifyTheme<T>>;
+    cssVarsThemeWide: StaticTokens<ThemeCssVarsWide<T>>;
+    cssVarsTheme: StaticTokens<ThemeCssVars<T>>;
+    pseudoThemeCssVars: StaticTokens<StaticTokens<T>>;
 }
 /**
  * На основе описания темы, генерирует рутовую тему
  */
-export declare function expandRootTheme<TD = ThemeDescription, T = Theme>(themeDescription: TD): T;
+export declare function expandRootTheme<TD = ThemeDescription, T = Theme>(themeDescription: TD): StaticTokens<T>;
 /**
  * Генерирует все виды ts-тем, на основе описания темы
  * Может работать и с любым интерфейсом и количеством переменных в теме
  */
-export declare function expandAll<TD = ThemeDescription, T = Theme>(themeDescription: TD): ExpandedThemeObject<T>;
+export declare function expandAll<TD = ThemeDescription, T = Theme>(themeDescription: TD): ExpandedThemeObject<StaticTokens<T>>;

package/build/helpers/tokenHelpers.d.ts

@@ -0,0 +1,4 @@
+import { ThemeGeneral } from '../../interfaces/general';
+import { Token } from '../../interfaces/general/tools/tokenValue';
+export declare function alias<T extends ThemeGeneral>(token: string): (theme: Partial<T>) => Token<any, T>;
+export declare function staticRef<T>(value: Token<T, any>): T;

package/build/helpers/tokenHelpers.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.staticRef = exports.alias = void 0;
+function alias(token) {
+    return function (theme) { return theme[token]; };
+}
+exports.alias = alias;
+function staticRef(value) {
+    if (typeof value === 'function') {
+        throw new Error('Cannot use callable token value in static ref');
+    }
+    return value;
+}
+exports.staticRef = staticRef;

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

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

package/build/helpers/tokenHelpers.test.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tokenHelpers_1 = require("./tokenHelpers");
+describe('tokenHelpers', function () {
+    describe('alias', function () {
+        test('maps token to another token', function () {
+            expect(tokenHelpers_1.alias('sizeArrow')({ sizeArrow: { regular: 10 } })).toEqual({
+                regular: 10,
+            });
+        });
+    });
+    describe('staticRef', function () {
+        test('returns static value', function () {
+            expect(tokenHelpers_1.staticRef(10)).toEqual(10);
+        });
+        test('fails for dynamic value', function () {
+            expect(function () { return tokenHelpers_1.staticRef(tokenHelpers_1.alias('sizeArrow')); }).toThrowError('Cannot use callable token value in static ref');
+        });
+    });
+});

package/build/themeProcessors/extractGeneralTokens/extractGeneralTokens.js

@@ -10,6 +10,15 @@ exports.extractGeneralTokens = void 0;
  */
 function extractGeneralTokens(themeDescription) {
     var copyDescription = JSON.parse(JSON.stringify(themeDescription));
+    var tokens = Object.keys(themeDescription);
+    // Разворачиваем токены-функции
+    for (var _i = 0, tokens_1 = tokens; _i < tokens_1.length; _i++) {
+        var token = tokens_1[_i];
+        var tokenValue = themeDescription[token];
+        if (typeof tokenValue === 'function') {
+            copyDescription[token] = tokenValue(themeDescription);
+        }
+    }
     delete copyDescription.colors;
     delete copyDescription.colorsScheme;
     return copyDescription;

package/build/themeProcessors/extractVarsNames/extractVarsNames.js

@@ -18,6 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extractVarsNames = exports.getVariableName = void 0;
 var convertCamelToSnake_1 = require("../../helpers/convertCamelToSnake");
+var tokenHelpers_1 = require("../../helpers/tokenHelpers");
 var customMedia_1 = require("../customMedia/customMedia");
 var pixelifyValues_1 = require("../pixelifyValues/pixelifyValues");
 function getVariableName(_a) {
@@ -129,6 +130,6 @@ function extractVarsNames(sourceTheme, opt) {
     var typedSourceTheme = sourceTheme;
     var pixelifyedTheme = pixelifyValues_1.pixelifyValues(sourceTheme);
     var customMedia = customMedia_1.processCustomMedia(sourceTheme);
-    return processVarNaming(__assign({ object: pixelifyedTheme, prefix: typedSourceTheme.prefix, customMedia: customMedia }, opt));
+    return processVarNaming(__assign({ object: pixelifyedTheme, prefix: tokenHelpers_1.staticRef(typedSourceTheme.prefix), customMedia: customMedia }, opt));
 }
 exports.extractVarsNames = extractVarsNames;

package/interfaces/general/index.d.ts

@@ -9,6 +9,7 @@ import { NamifyObject } from './tools/cssVars';
 import { StringifyObject } from './tools/utils';
 import { Fonts, TypographyBaseProps } from './typography';
 import ColorScheme = Property.ColorScheme;
+import { StaticTokens, Tokens } from './tools/tokenValue';
 interface AdaptiveInterfaceValues extends Sizes, Fonts {
 }
 declare type AdaptiveTokens = {
@@ -40,7 +41,7 @@ export interface ThemeGeneral extends AdaptiveTokens, SpecialTokens, ToneValues,
 /**
  * Интерфейс описания Темы (в этом типе описываются все темы дизайн-системы)
  */
-export interface ThemeDescription extends ThemeGeneral, ColorsDescription {
+export interface ThemeDescription extends Tokens<ThemeGeneral>, ColorsDescription {
 }
 /**
  * Основной интерфейс темы
@@ -51,7 +52,7 @@ export interface Theme extends ThemeGeneral, ColorsFinal {
 /**
  * Тема, в коротой все значения пикселизированы. Т.е. 16 -> '16px'
  */
-export declare type PixelifyTheme<T extends Partial<Record<keyof T, any>> = Theme> = StringifyObject<Omit<T, 'breakpoints' | 'themeType'>> & Pick<T, Extract<'breakpoints', keyof T>> & {
+export declare type PixelifyTheme<T extends Partial<Record<keyof T, any>> = StaticTokens<Theme>> = StringifyObject<Omit<T, 'breakpoints' | 'themeType'>> & Pick<T, Extract<'breakpoints', keyof T>> & {
     themeType: 'pixelify';
     themeName: string;
     colorScheme: ColorScheme;

package/interfaces/general/tools/tokenValue.d.ts

@@ -0,0 +1,8 @@
+export declare type Token<T, Theme> = T | ((theme: Theme) => T);
+export declare type MakeStaticToken<T> = T extends (...args: any[]) => any ? MakeStaticToken<ReturnType<T>> : T;
+export declare type Tokens<T> = {
+    [K in keyof T]: Token<T[K], T>;
+};
+export declare type StaticTokens<T> = {
+    [K in keyof T]: MakeStaticToken<T[K]>;
+};

package/interfaces/general/tools/tokenValue.js

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

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

@@ -18,8 +18,15 @@ export interface Fonts {
     fontTitle1: Font;
     fontTitle2: Font;
     fontTitle3: Font;
+    /**
+     * @deprecated
+     * @see fontHeadline1
+     */
     fontHeadline: Font;
+    fontHeadline1: Font;
+    fontHeadline2: Font;
     fontText: Font;
+    fontParagraph: Font;
     fontSubhead: Font;
     fontFootnote: Font;
     fontFootnoteCaps: Font;

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

@@ -1,18 +1,15 @@
 import { ThemeCssVars } from '../../general';
-import { ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
+import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
 import { Adaptive } from '../../general/tools';
 import { Font } from '../../general/typography';
 import { LocalParadigmColorsDescriptionStruct } from '../../namespaces/paradigm';
 import { ThemeParadigmBase, ThemeParadigmBaseDescription } from '../paradigmBase';
 export interface ThemeCalendarOverValues {
-    fontEventM: Adaptive<Font>;
-    fontEventS: Adaptive<Font>;
-    fontEventXS: Adaptive<Font>;
-    fontTime: Adaptive<Font>;
-    fontBodyIOS: Adaptive<Font>;
-    fontBodyAndroid: Adaptive<Font>;
+    calendarFontTextEvent: Adaptive<Font>;
+    calendarFontTextEventSmall: Adaptive<Font>;
 }
 export interface LocalCalendarColorDescriptionStruct {
+    calendarColorBackgroundAccentTintThemed: ColorDescription;
 }
 export declare type CalendarLocalColors = {
     [key in keyof LocalCalendarColorDescriptionStruct]: ColorWithStates;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.2.0",
+  "version": "4.3.1-dev-d4a11c.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",

package/themeDescriptions/base/paradigm.js

@@ -12,16 +12,17 @@ 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 tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
 var overlayColors_1 = require("../../build/themeProcessors/expandColors/overlayColors");
 var common_1 = require("../../utils/common");
 var fontFamilyAccent = 'MailSans, Helvetica, Arial, sans-serif';
 var fontFamilyBase = 'Helvetica, Arial, sans-serif';
-var fontWeightAccent1 = 400;
+var fontWeightAccent1 = 500;
 var fontWeightAccent2 = 500;
-var fontWeightAccent3 = 500;
-var fontWeightBase1 = 400;
+var fontWeightAccent3 = 400;
+var fontWeightBase1 = 700;
 var fontWeightBase2 = 700;
-var fontWeightBase3 = 700;
+var fontWeightBase3 = 400;
 exports.lightColors = {
     colorsScheme: 'light',
     colors: {
@@ -222,59 +223,89 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
             fontSize: 24,
             lineHeight: 28,
             fontFamily: fontFamilyAccent,
-            fontWeight: fontWeightAccent3,
+            fontWeight: fontWeightAccent1,
         },
     }, fontTitle2: {
         regular: {
             fontSize: 20,
             lineHeight: 26,
             fontFamily: fontFamilyAccent,
-            fontWeight: fontWeightAccent3,
+            fontWeight: fontWeightAccent1,
         },
     }, fontTitle3: {
         regular: {
             fontSize: 17,
             lineHeight: 22,
             fontFamily: fontFamilyAccent,
-            fontWeight: fontWeightAccent3,
+            fontWeight: fontWeightAccent1,
         },
-    }, fontHeadline: {
+    }, fontHeadline: tokenHelpers_1.alias('fontHeadline1'), fontHeadline1: {
+        regular: {
+            fontSize: 16,
+            lineHeight: 20,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent2,
+        },
+        compact: {
+            fontSize: 15,
+            lineHeight: 20,
+        },
+    }, fontHeadline2: {
         regular: {
             fontSize: 15,
             lineHeight: 20,
             fontFamily: fontFamilyAccent,
             fontWeight: fontWeightAccent2,
         },
+        compact: {
+            fontSize: 14,
+            lineHeight: 20,
+        },
     }, 
     // todo поменять местами fontSize, когда откажемся от auto
     // todo fontSize в мобильном виде должен быть 16
     fontText: {
+        regular: {
+            fontSize: 16,
+            lineHeight: 20,
+            fontFamily: fontFamilyBase,
+            fontWeight: fontWeightBase3,
+        },
+        compact: {
+            fontSize: 15,
+            lineHeight: 20,
+        },
+    }, fontParagraph: {
         regular: {
             fontSize: 15,
             lineHeight: 20,
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
         },
     }, fontSubhead: {
         regular: {
             fontSize: 14,
             lineHeight: 18,
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
+        },
+        compact: {
+            fontSize: 13,
+            lineHeight: 18,
         },
     }, fontFootnote: {
         regular: {
             fontSize: 13,
             lineHeight: 18,
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
         },
     }, fontFootnoteCaps: {
         regular: {
             fontSize: 13,
             lineHeight: 18,
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
             textTransform: 'uppercase',
             letterSpacing: '0.3px',
         },
@@ -283,14 +314,14 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
             fontSize: 12,
             lineHeight: 16,
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
         },
     }, fontCaption1Caps: {
         regular: {
             fontSize: 12,
             lineHeight: 16,
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
             textTransform: 'uppercase',
             letterSpacing: '0.26px',
         },
@@ -299,14 +330,14 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
             fontSize: 11,
             lineHeight: 14,
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
         },
     }, fontCaption2Caps: {
         regular: {
             fontSize: 11,
             lineHeight: 14,
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
             textTransform: 'uppercase',
             letterSpacing: '0.22px',
         },
@@ -315,14 +346,14 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
             fontSize: 9,
             lineHeight: 12,
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
         },
     }, fontCaption3Caps: {
         regular: {
             fontSize: 9,
             lineHeight: 12,
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
             textTransform: 'uppercase',
             letterSpacing: '0.16px',
         },
@@ -440,8 +471,8 @@ exports.lightTheme = __assign(__assign(__assign({}, exports.lightThemeBase), com
         regular: {
             fontSize: 28,
             lineHeight: 32,
-            fontFamily: exports.lightThemeBase.fontFamilyAccent,
-            fontWeight: exports.lightThemeBase.fontWeightAccent3,
+            fontFamily: tokenHelpers_1.staticRef(exports.lightThemeBase.fontFamilyAccent),
+            fontWeight: tokenHelpers_1.staticRef(exports.lightThemeBase.fontWeightAccent1),
         },
         compact: {
             fontSize: 44,
@@ -453,8 +484,8 @@ exports.lightTheme = __assign(__assign(__assign({}, exports.lightThemeBase), com
         regular: {
             fontSize: 24,
             lineHeight: 28,
-            fontFamily: exports.lightThemeBase.fontFamilyAccent,
-            fontWeight: exports.lightThemeBase.fontWeightAccent3,
+            fontFamily: tokenHelpers_1.staticRef(exports.lightThemeBase.fontFamilyAccent),
+            fontWeight: tokenHelpers_1.staticRef(exports.lightThemeBase.fontWeightAccent1),
         },
         compact: {
             fontSize: 32,
@@ -466,8 +497,8 @@ exports.lightTheme = __assign(__assign(__assign({}, exports.lightThemeBase), com
         regular: {
             fontSize: 20,
             lineHeight: 26,
-            fontFamily: exports.lightThemeBase.fontFamilyAccent,
-            fontWeight: exports.lightThemeBase.fontWeightAccent3,
+            fontFamily: tokenHelpers_1.staticRef(exports.lightThemeBase.fontFamilyAccent),
+            fontWeight: tokenHelpers_1.staticRef(exports.lightThemeBase.fontWeightAccent1),
         },
         compact: {
             fontSize: 28,

package/themeDescriptions/base/vk.js

@@ -12,14 +12,15 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.darkTheme = exports.lightTheme = exports.darkColors = exports.lightColors = void 0;
+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';
-var fontWeightAccent1 = 400;
+var fontWeightAccent1 = 600;
 var fontWeightAccent2 = 500;
-var fontWeightAccent3 = 600;
-var fontWeightBase1 = 400;
+var fontWeightAccent3 = 400;
+var fontWeightBase1 = 600;
 var fontWeightBase2 = 500;
-var fontWeightBase3 = 600;
+var fontWeightBase3 = 400;
 exports.lightColors = {
     colorsScheme: 'light',
     colors: {
@@ -211,7 +212,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 28,
             letterSpacing: '-0.48px',
             fontFamily: fontFamilyAccent,
-            fontWeight: fontWeightAccent3,
+            fontWeight: fontWeightAccent1,
         },
     }, fontTitle2: {
         regular: {
@@ -219,7 +220,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 24,
             letterSpacing: '-0.4px',
             fontFamily: fontFamilyAccent,
-            fontWeight: fontWeightAccent3,
+            fontWeight: fontWeightAccent1,
         },
     }, fontTitle3: {
         regular: {
@@ -227,9 +228,9 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 22,
             letterSpacing: '-0.22px',
             fontFamily: fontFamilyAccent,
-            fontWeight: fontWeightAccent3,
+            fontWeight: fontWeightAccent1,
         },
-    }, fontHeadline: {
+    }, fontHeadline: tokenHelpers_1.alias('fontHeadline1'), fontHeadline1: {
         regular: {
             fontSize: 16,
             lineHeight: 20,
@@ -237,18 +238,44 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             fontFamily: fontFamilyAccent,
             fontWeight: fontWeightAccent2,
         },
-    }, fontText: {
+        compact: {
+            fontSize: 15,
+            lineHeight: 20,
+            letterSpacing: '-0.1px',
+        },
+    }, fontHeadline2: {
         regular: {
             fontSize: 15,
             lineHeight: 20,
             letterSpacing: '-0.1px',
-            fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontFamily: fontFamilyAccent,
+            fontWeight: fontWeightAccent2,
         },
         compact: {
+            fontSize: 14,
+            lineHeight: 20,
+            letterSpacing: '-0.06px',
+        },
+    }, fontText: {
+        regular: {
             fontSize: 16,
             lineHeight: 20,
             letterSpacing: '-0.16px',
+            fontFamily: fontFamilyBase,
+            fontWeight: fontWeightBase3,
+        },
+        compact: {
+            fontSize: 15,
+            lineHeight: 20,
+            letterSpacing: '-0.1px',
+        },
+    }, fontParagraph: {
+        regular: {
+            fontSize: 15,
+            lineHeight: 20,
+            letterSpacing: '-0.1px',
+            fontFamily: fontFamilyBase,
+            fontWeight: fontWeightBase3,
         },
     }, fontSubhead: {
         regular: {
@@ -256,7 +283,12 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 18,
             letterSpacing: '-0.06px',
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
+        },
+        compact: {
+            fontSize: 13,
+            lineHeight: 16,
+            letterSpacing: '0px',
         },
     }, fontFootnote: {
         regular: {
@@ -264,7 +296,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 16,
             letterSpacing: '0px',
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
         },
     }, fontFootnoteCaps: {
         regular: {
@@ -272,7 +304,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 16,
             letterSpacing: '0.3px',
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
             textTransform: 'uppercase',
         },
     }, fontCaption1: {
@@ -281,7 +313,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 14,
             letterSpacing: '0.06px',
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
         },
     }, fontCaption1Caps: {
         regular: {
@@ -289,7 +321,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 14,
             letterSpacing: '0.2px',
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase3,
+            fontWeight: fontWeightBase1,
             textTransform: 'uppercase',
         },
     }, fontCaption2: {
@@ -298,7 +330,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 14,
             letterSpacing: '0.11px',
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
         },
     }, fontCaption2Caps: {
         regular: {
@@ -306,7 +338,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 14,
             letterSpacing: '0.3px',
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase3,
+            fontWeight: fontWeightBase1,
             textTransform: 'uppercase',
         },
     }, fontCaption3: {
@@ -315,7 +347,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 12,
             letterSpacing: '0.18px',
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase1,
+            fontWeight: fontWeightBase3,
         },
     }, fontCaption3Caps: {
         regular: {
@@ -323,7 +355,7 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
             lineHeight: 12,
             letterSpacing: '0.3px',
             fontFamily: fontFamilyBase,
-            fontWeight: fontWeightBase3,
+            fontWeight: fontWeightBase1,
             textTransform: 'uppercase',
         },
     }, 
@@ -413,7 +445,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)', elevation2: '0px 0px 2px rgba(0, 0, 0, 0.04), 0px 4px 4px rgba(0, 0, 0, 0.08)', elevation3: '0px 0px 4px rgba(0, 0, 0, 0.08), 0px 8px 8px rgba(0, 0, 0, 0.16)', 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)', 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.8)', 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 });
 exports.darkTheme = __assign(__assign(__assign({}, exports.lightTheme), exports.darkColors), { themeName: 'vkBaseDark', colorsScheme: 'dark', 
     // TODO: Поставить нормальные отступы из тёмной темы
-    elevation1: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)', elevation2: '0px 0px 2px rgba(0, 0, 0, 0.04), 0px 4px 4px rgba(0, 0, 0, 0.08)', elevation3: '0px 0px 4px rgba(0, 0, 0, 0.08), 0px 8px 8px rgba(0, 0, 0, 0.16)', 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.8)', elevation4: '0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)' });