@vkontakte/vkui-tokens 4.5.2 → 4.8.0

package/build/compilers/index.d.ts

@@ -3,7 +3,7 @@ declare type ThemeBuildType = 'root' | 'subtheme' | 'flat' | 'cssVars' | 'cssVar
 declare function writeJsonFile<T = Theme>(themePath: string, theme: T, _?: ThemeBuildType): void;
 declare function writeTsFile<T extends SpecialTokens = Theme>(themePath: string, theme: T, type: ThemeBuildType, themeName?: string): void;
 declare function writeStyleFiles<PT extends PixelifyTheme = PixelifyTheme>(themePath: string, theme: PT): void;
-declare function writeCssVarsSourceFile<PT extends PixelifyTheme = PixelifyTheme>(themePath: string, theme: PT, cssWarsTheme: any): void;
+declare function writeCssVarsSourceFile<PT extends PixelifyTheme = PixelifyTheme>(themePath: string, theme: PT, cssVarsTheme: any, themeBase?: PT): void;
 declare function writeCssVarsSourceMediaFile<T = ThemeCssVarsWide>(themePath: string, theme: T): void;
 declare function writeCssVarsJsUtils<T = Theme>(themePath: string, theme: ThemeCssVarsWide<T>): void;
 export { writeCssVarsJsUtils, writeCssVarsSourceFile, writeCssVarsSourceMediaFile, writeJsonFile, writeStyleFiles, writeTsFile, };

package/build/compilers/index.js

@@ -12,6 +12,19 @@ var compileStyles_1 = require("./styles/compileStyles");
 var compileTypeScript_1 = require("./ts/compileTypeScript");
 var capitalize_1 = require("../helpers/capitalize");
 var compileBreakpointsCssVarsDeclaration_1 = require("./cssVars/declarations/compileBreakpointsCssVarsDeclaration");
+var cssModes = [
+    { mode: 'default', fileName: 'index.css' },
+    { mode: 'onlyVariables', fileName: 'onlyVariables.css' },
+    { mode: 'onlyVariablesLocal', fileName: 'onlyVariablesLocal.css' },
+    {
+        mode: 'onlyVariablesLocalIncremental',
+        fileName: 'onlyVariablesLocalIncremental.css',
+    },
+    { mode: 'onlyColors', fileName: 'onlyColors.css' },
+    { mode: 'onlyAdaptiveGroups', fileName: 'onlyAdaptiveGroups.css' },
+    { mode: 'noSizes', fileName: 'noSizes.css' },
+    { mode: 'noColors', fileName: 'noColors.css' },
+];
 function writeJsonFile(themePath, theme, _) {
     console.log("\u043A\u043E\u043C\u043F\u0438\u043B\u0438\u0440\u0443\u0435\u043C json...");
     var fileName = "index.json";
@@ -65,26 +78,26 @@ function writeStyleFiles(themePath, theme) {
     });
 }
 exports.writeStyleFiles = writeStyleFiles;
-function writeCssVarsSourceFile(themePath, theme, cssWarsTheme) {
+function writeCssVarsSourceFile(themePath, theme, cssVarsTheme, themeBase) {
+    var _a;
     console.log("\u043A\u043E\u043C\u043F\u0438\u043B\u0438\u0440\u0443\u0435\u043C \u0438\u0441\u0442\u043E\u0447\u043D\u0438\u043A\u0438 \u0434\u043B\u044F css vars \u0442\u0435\u043C...");
-    [
-        { mode: 'default', fileName: 'index.css' },
-        { mode: 'onlyVariables', fileName: 'onlyVariables.css' },
-        { mode: 'onlyVariablesLocal', fileName: 'onlyVariablesLocal.css' },
-        { mode: 'onlyColors', fileName: 'onlyColors.css' },
-        { mode: 'onlyAdaptiveGroups', fileName: 'onlyAdaptiveGroups.css' },
-        { mode: 'noSizes', fileName: 'noSizes.css' },
-        { mode: 'noColors', fileName: 'noColors.css' },
-    ].forEach(function (_a) {
-        var _b;
-        var mode = _a.mode, fileName = _a.fileName;
-        var filePath = path_1.default.resolve(themePath, fileName);
-        var content = mode === 'default'
-            ? compileStyles_1.compileStyles('css', theme, 'withAdaptiveGroups') + "\n\n" + ((_b = compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration(cssWarsTheme)) !== null && _b !== void 0 ? _b : '')
-            : compileStyles_1.compileStyles('css', theme, mode);
+    for (var _i = 0, cssModes_1 = cssModes; _i < cssModes_1.length; _i++) {
+        var modeConfig = cssModes_1[_i];
+        var filePath = path_1.default.resolve(themePath, modeConfig.fileName);
+        var compiledVars = compileStyles_1.compileStyles('css', theme, modeConfig.mode === 'default'
+            ? 'withAdaptiveGroups'
+            : modeConfig.mode, themeBase);
+        var compiledBreakpoints = modeConfig.mode === 'default'
+            ? "\n\n" + ((_a = compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration(cssVarsTheme)) !== null && _a !== void 0 ? _a : '')
+            : '';
+        if (compiledBreakpoints.includes('null')) {
+            console.error(modeConfig);
+            throw new Error('NULL');
+        }
+        var content = compiledVars + compiledBreakpoints;
         fs_extra_1.default.writeFileSync(filePath, content);
-        console.log("\u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0437\u0430\u043F\u0438\u0441\u0430\u043B\u0438 \u0444\u0430\u0439\u043B " + fileName);
-    });
+        console.log("\u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0437\u0430\u043F\u0438\u0441\u0430\u043B\u0438 \u0444\u0430\u0439\u043B " + modeConfig.fileName);
+    }
 }
 exports.writeCssVarsSourceFile = writeCssVarsSourceFile;
 function writeCssVarsSourceMediaFile(themePath, theme) {

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

@@ -2,10 +2,10 @@ import 'css.escape';
 import { PixelifyTheme } from '../../../interfaces/general';
 import { Formats } from './helpers/tokenProcessors';
 export declare const serviceKeys: string[];
-export declare type CompileStylesMode = 'default' | 'onlyVariables' | 'onlyVariablesLocal' | 'onlyColors' | 'withAdaptiveGroups' | 'onlyAdaptiveGroups' | 'noSizes' | 'noColors';
+export declare type CompileStylesMode = 'default' | 'onlyVariables' | 'onlyVariablesLocal' | 'onlyVariablesLocalIncremental' | 'onlyColors' | 'withAdaptiveGroups' | 'onlyAdaptiveGroups' | 'noSizes' | 'noColors';
 export declare function getPrefix<PT extends PixelifyTheme>(format: Formats, theme: PT): string;
 export declare function getRootSelector<PT extends PixelifyTheme>(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;
+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, themeBase?: PT) => string;

package/build/compilers/styles/compileStyles.js

@@ -6,6 +6,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileStyles = exports.getRootSelector = exports.getPrefix = exports.serviceKeys = void 0;
 require("css.escape");
+var assert_1 = require("assert");
 var common_tags_1 = require("common-tags");
 var getAllButColors_1 = require("../../helpers/getAllButColors");
 var getAllButSizes_1 = require("../../helpers/getAllButSizes");
@@ -28,22 +29,44 @@ function getPrefix(format, theme) {
     return prefix;
 }
 exports.getPrefix = getPrefix;
-function getRootSelector(theme, mode) {
+function isOnlyVariables(mode) {
+    return mode.toLowerCase().includes('onlyvariables');
+}
+function isLocal(mode) {
+    return mode.toLowerCase().includes('local');
+}
+function isIncremental(mode) {
+    return mode.toLowerCase().includes('incremental');
+}
+function getThemeNameBase(theme) {
     var _a;
-    if (!mode.endsWith('Local')) {
+    return (_a = theme.themeNameBase) !== null && _a !== void 0 ? _a : theme.themeName;
+}
+function getRootSelector(theme, mode) {
+    if (!isLocal(mode)) {
         return ':root';
     }
-    return "." + getPrefix(tokenProcessors_1.EStyleTypes.CSS, theme) + ((_a = theme.themeNameBase) !== null && _a !== void 0 ? _a : theme.themeName) + "--" + theme.colorsScheme;
+    return "." + getPrefix(tokenProcessors_1.EStyleTypes.CSS, theme) + getThemeNameBase(theme) + "--" + theme.colorsScheme;
 }
 exports.getRootSelector = getRootSelector;
+function isDeepEqual(actual, expected) {
+    try {
+        assert_1.deepStrictEqual(actual, expected);
+        return true;
+    }
+    catch (_) {
+        return false;
+    }
+}
 /**
- * Компиллирует строку со стилями (в разных форматах), на основе темы
+ * Компилирует строку со стилями (в разных форматах), на основе темы
  */
-var compileStyles = function (format, theme, mode) {
+var compileStyles = function (format, theme, mode, themeBase) {
     if (mode === void 0) { mode = 'default'; }
     var classicCssType = isClassicCssType(format);
     var prefix = getPrefix(format, theme);
     var rootSelector = getRootSelector(theme, mode);
+    var incremental = isIncremental(mode);
     var getDeclaration = tokenProcessors_1.varDeclarations[format];
     var getVariableStatement = tokenProcessors_1.variablesStatementDeclaration[format];
     var getCustomMediaDeclaration = tokenProcessors_1.customMediaDeclaration[format];
@@ -67,6 +90,10 @@ var compileStyles = function (format, theme, mode) {
             return;
         }
         var token = theme[key];
+        // в инкрементальном режиме пропускаем токены, чьи значения совпадают со значениями из themeBase
+        if (incremental && themeBase && isDeepEqual(token, themeBase[key])) {
+            return;
+        }
         // если переменная — строка (например, имя темы)
         if (tokenRecognition_1.isString(token, key)) {
             variables += getVariableStatement(getDeclaration(key, prefix), "'" + CSS.escape(token) + "'");
@@ -114,7 +141,7 @@ var compileStyles = function (format, theme, mode) {
     if (classicCssType && variables) {
         result = common_tags_1.stripIndent(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t", " {\n\t\t", "}\n\t\t"], ["\n\t\t", " {\n\t\t", "}\n\t\t"])), rootSelector, variables.split('\n').join('\n\t\t'));
     }
-    if (mode === 'onlyVariables' || mode === 'onlyVariablesLocal') {
+    if (isOnlyVariables(mode)) {
         return common_tags_1.stripIndent(result);
     }
     if (mode === 'onlyAdaptiveGroups') {

package/build/compilers/styles/compileStyles.test.js

@@ -9,7 +9,7 @@ var compileStyles_1 = require("./compileStyles");
 var tokenProcessors_1 = require("./helpers/tokenProcessors");
 var formats = Object.values(tokenProcessors_1.EStyleTypes);
 function runTest(format, testData) {
-    var compiled = compileStyles_1.compileStyles(format, testData.descriptionTheme, testData.mode);
+    var compiled = compileStyles_1.compileStyles(format, testData.descriptionTheme, testData.mode, testData.descriptionThemeBase);
     expect(compiled).toBe(testData.result[format]);
 }
 describe('compileStyles', function () {
@@ -283,5 +283,43 @@ describe('compileStyles', function () {
             },
         });
     });
+    test.each(formats)('%s: onlyVariablesLocalIncremental', function (f) {
+        runTest(f, {
+            mode: 'onlyVariablesLocalIncremental',
+            descriptionTheme: {
+                themeName: 'vkIOSDark',
+                themeNameBase: 'vkIOS',
+                themeInheritsFrom: 'vkIOS',
+                colorsScheme: 'dark',
+                sizeBasePadding: {
+                    regular: '20px',
+                },
+                colorBackground: {
+                    normal: '#FFF',
+                    hover: '#AAA',
+                    active: '#CCC',
+                },
+            },
+            descriptionThemeBase: {
+                themeName: 'vkIOS',
+                colorsScheme: 'light',
+                sizeBasePadding: {
+                    regular: '20px',
+                },
+                colorBackground: {
+                    normal: '#AAA',
+                    hover: '#AAA',
+                    active: '#CCC',
+                },
+            },
+            result: {
+                css: common_tags_1.stripIndent(templateObject_61 || (templateObject_61 = __makeTemplateObject(["\n\t\t\t\t\t.vkui--vkIOS--dark {\n\t\t\t\t\t\t--vkui--theme_name: 'vkIOSDark';\n\t\t\t\t\t\t--vkui--theme_name_base: 'vkIOS';\n\t\t\t\t\t\t--vkui--theme_inherits_from: 'vkIOS';\n\t\t\t\t\t\t--vkui--colors_scheme: dark;\n\t\t\t\t\t\t--vkui--color_background: #FFF;\n\t\t\t\t\t\t--vkui--color_background--hover: #AAA;\n\t\t\t\t\t\t--vkui--color_background--active: #CCC;\n\t\t\t\t\t}\n\t\t\t\t"], ["\n\t\t\t\t\t.vkui--vkIOS--dark {\n\t\t\t\t\t\t--vkui--theme_name: 'vkIOSDark';\n\t\t\t\t\t\t--vkui--theme_name_base: 'vkIOS';\n\t\t\t\t\t\t--vkui--theme_inherits_from: 'vkIOS';\n\t\t\t\t\t\t--vkui--colors_scheme: dark;\n\t\t\t\t\t\t--vkui--color_background: #FFF;\n\t\t\t\t\t\t--vkui--color_background--hover: #AAA;\n\t\t\t\t\t\t--vkui--color_background--active: #CCC;\n\t\t\t\t\t}\n\t\t\t\t"]))),
+                scss: common_tags_1.stripIndent(templateObject_62 || (templateObject_62 = __makeTemplateObject(["\n\t\t\t\t\t$theme-name: 'vkIOSDark';\n\t\t\t\t\t$theme-name-base: 'vkIOS';\n\t\t\t\t\t$theme-inherits-from: 'vkIOS';\n\t\t\t\t\t$colors-scheme: dark;\n\t\t\t\t\t$color-background: #FFF;\n\t\t\t\t\t$color-background--hover: #AAA;\n\t\t\t\t\t$color-background--active: #CCC;\n\t\t\t\t"], ["\n\t\t\t\t\t$theme-name: 'vkIOSDark';\n\t\t\t\t\t$theme-name-base: 'vkIOS';\n\t\t\t\t\t$theme-inherits-from: 'vkIOS';\n\t\t\t\t\t$colors-scheme: dark;\n\t\t\t\t\t$color-background: #FFF;\n\t\t\t\t\t$color-background--hover: #AAA;\n\t\t\t\t\t$color-background--active: #CCC;\n\t\t\t\t"]))),
+                pcss: common_tags_1.stripIndent(templateObject_63 || (templateObject_63 = __makeTemplateObject(["\n\t\t\t\t.vkui--vkIOS--dark {\n\t\t\t\t\t--theme-name: 'vkIOSDark';\n\t\t\t\t\t--theme-name-base: 'vkIOS';\n\t\t\t\t\t--theme-inherits-from: 'vkIOS';\n\t\t\t\t\t--colors-scheme: dark;\n\t\t\t\t\t--color-background: #FFF;\n\t\t\t\t\t--color-background--hover: #AAA;\n\t\t\t\t\t--color-background--active: #CCC;\n\t\t\t\t}"], ["\n\t\t\t\t.vkui--vkIOS--dark {\n\t\t\t\t\t--theme-name: 'vkIOSDark';\n\t\t\t\t\t--theme-name-base: 'vkIOS';\n\t\t\t\t\t--theme-inherits-from: 'vkIOS';\n\t\t\t\t\t--colors-scheme: dark;\n\t\t\t\t\t--color-background: #FFF;\n\t\t\t\t\t--color-background--hover: #AAA;\n\t\t\t\t\t--color-background--active: #CCC;\n\t\t\t\t}"]))),
+                less: common_tags_1.stripIndent(templateObject_64 || (templateObject_64 = __makeTemplateObject(["\n\t\t\t\t\t@theme-name: 'vkIOSDark';\n\t\t\t\t\t@theme-name-base: 'vkIOS';\n\t\t\t\t\t@theme-inherits-from: 'vkIOS';\n\t\t\t\t\t@colors-scheme: dark;\n\t\t\t\t\t@color-background: #FFF;\n\t\t\t\t\t@color-background--hover: #AAA;\n\t\t\t\t\t@color-background--active: #CCC;\n\t\t\t\t"], ["\n\t\t\t\t\t@theme-name: 'vkIOSDark';\n\t\t\t\t\t@theme-name-base: 'vkIOS';\n\t\t\t\t\t@theme-inherits-from: 'vkIOS';\n\t\t\t\t\t@colors-scheme: dark;\n\t\t\t\t\t@color-background: #FFF;\n\t\t\t\t\t@color-background--hover: #AAA;\n\t\t\t\t\t@color-background--active: #CCC;\n\t\t\t\t"]))),
+                styl: common_tags_1.stripIndent(templateObject_65 || (templateObject_65 = __makeTemplateObject(["\n\t\t\t\t\t$theme-name = 'vkIOSDark';\n\t\t\t\t\t$theme-name-base = 'vkIOS';\n\t\t\t\t\t$theme-inherits-from = 'vkIOS';\n\t\t\t\t\t$colors-scheme = dark;\n\t\t\t\t\t$color-background = #FFF;\n\t\t\t\t\t$color-background--hover = #AAA;\n\t\t\t\t\t$color-background--active = #CCC;\n\t\t\t\t"], ["\n\t\t\t\t\t$theme-name = 'vkIOSDark';\n\t\t\t\t\t$theme-name-base = 'vkIOS';\n\t\t\t\t\t$theme-inherits-from = 'vkIOS';\n\t\t\t\t\t$colors-scheme = dark;\n\t\t\t\t\t$color-background = #FFF;\n\t\t\t\t\t$color-background--hover = #AAA;\n\t\t\t\t\t$color-background--active = #CCC;\n\t\t\t\t"]))),
+            },
+        });
+    });
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56, templateObject_57, templateObject_58, templateObject_59, templateObject_60;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49, templateObject_50, templateObject_51, templateObject_52, templateObject_53, templateObject_54, templateObject_55, templateObject_56, templateObject_57, templateObject_58, templateObject_59, templateObject_60, templateObject_61, templateObject_62, templateObject_63, templateObject_64, templateObject_65;

package/build/compilers/styles/helpers/tokenRecognition.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isCustomMediaToken = exports.isAdaptiveFlatToken = exports.isGroupToken = exports.isColor = exports.isString = void 0;
 var customMedia_1 = require("../../../themeProcessors/customMedia/customMedia");
-var stringKeys = ['themeName', 'themeNameBase'];
+var stringKeys = ['themeName', 'themeNameBase', 'themeInheritsFrom'];
 function isString(token, key) {
     return typeof token === 'string' && stringKeys.includes(key);
 }

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

@@ -99,6 +99,7 @@ export interface ColorsDescriptionStruct {
     colorOverlayPrimary: ColorDescription;
     colorTransparent: ColorDescription;
     colorBackgroundNegativeTint: ColorDescription;
+    colorFieldBackground: ColorDescription;
 }
 export declare type Colors = {
     [key in keyof ColorsDescriptionStruct]: ColorWithStates;

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

@@ -4,4 +4,5 @@ export interface Elevation {
     elevation3: Property.BoxShadow;
     elevation2: Property.BoxShadow;
     elevation1: Property.BoxShadow;
+    elevation1InvertY: Property.BoxShadow;
 }

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

@@ -39,4 +39,5 @@ export interface Sizes {
     sizeButtonGroupGapSpace: number;
     sizeButtonGroupGapSmall: number;
     sizeButtonGroupGapMedium: number;
+    sizeOptionHierarchy: number;
 }

package/interfaces/general/index.d.ts

@@ -28,6 +28,7 @@ export interface ColorsFinal extends Colors, ColorsScheme {
 export interface SpecialTokens {
     themeName: string;
     themeNameBase?: string;
+    themeInheritsFrom?: string;
     prefix?: string;
 }
 export interface WithThemeType {

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

@@ -1,3 +1,4 @@
+import { Property } from 'csstype';
 import { ThemeCssVars } from '../../general';
 import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
 import { Adaptive } from '../../general/tools';
@@ -7,6 +8,10 @@ import { ThemeParadigmBase, ThemeParadigmBaseDescription } from '../paradigmBase
 export interface ThemeCalendarOverValues {
     calendarFontTextEvent: Adaptive<Font>;
     calendarFontTextEventSmall: Adaptive<Font>;
+    calendarElevationHeader: Property.BoxShadow;
+    calendarSizeBorderRadiusSmall: number;
+    calendarSizeBorderRadiusMedium: number;
+    calendarSizeBorderRadiusLarge: number;
 }
 export interface LocalCalendarColorDescriptionStruct {
     calendarColorBackgroundAccentTintThemed: ColorDescription;

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

@@ -38,6 +38,12 @@ declare type SocialColorsDescriptions = {
     [key in keyof SocialColors]: ColorDescription;
 };
 interface MediaUniqTokens {
+    mediaFontMediaHeader: Adaptive<Font>;
+    mediaFontMediaTitle1: Adaptive<Font>;
+    mediaFontMediaTitle2: Adaptive<Font>;
+    mediaFontMediaTitle3: Adaptive<Font>;
+    mediaFontMediaLead: Adaptive<Font>;
+    mediaFontMediaParagraph: Adaptive<Font>;
     fontFamilyArticle: Property.FontFamily;
     fontWeightArticle1: Property.FontWeight;
     fontWeightArticle2: Property.FontWeight;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.5.2",
+  "version": "4.8.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
   "scripts": {
-    "build": "npm run build:script && npm run tsc:generate-paths && npm run tsc:dist",
+    "build": "mkdir -p dist && npm run build:script && npm run tsc:generate-paths && npm run tsc:dist",
     "build:local": "npm run build && npm run clear:dist",
     "prepublish:dist": "npm run clear:src && npm run build",
     "publish:dist": "npm run prepublish:dist && cd dist && npm publish --access=public",
@@ -61,5 +61,9 @@
     "tscpaths": "0.0.9",
     "type-fest": "1.0.2",
     "typescript": "4.2.4"
+  },
+  "engines": {
+    "npm": "8.5.5",
+    "yarn": ">=1.21.1 <=1.22.18"
   }
 }

package/themeDescriptions/base/paradigm.js

@@ -46,6 +46,7 @@ exports.lightColors = {
         colorBackgroundModal: '#FFFFFF',
         colorBackgroundPositive: '#0DC268',
         colorBackgroundNegativeTint: '#FAEBEB',
+        colorFieldBackground: '#ffffff',
         // Text
         colorTextAccent: '#005FF9',
         colorTextAccentThemed: '#005FF9',
@@ -139,6 +140,7 @@ exports.darkColors = {
         colorBackgroundModal: '#303030',
         colorBackgroundPositive: '#0DC268',
         colorBackgroundNegativeTint: '#522e2e',
+        colorFieldBackground: '#232324',
         // Text
         colorTextAccent: '#3C82FD',
         colorTextAccentThemed: '#FFFFFF',
@@ -456,8 +458,12 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     }, sizeButtonGroupGapMedium: {
         regular: 12,
     }, 
+    // Токены иерархии
+    sizeOptionHierarchy: {
+        regular: 32,
+    }, 
     // Прочие отступы
-    elevation1: '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)', 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)',
@@ -630,6 +636,7 @@ exports.lightTheme = __assign(__assign(__assign({}, exports.lightThemeBase), com
     toneValueOverlay: 0.48, toneValueViewer: 0.88, toneValueToolbar: 0.24, toneValueHover: 0.04, toneValueActive: 0.08, toneValueFocus: 0.08, typeBorderButton: 'solid', typeBorderPosition: 'inset' });
 exports.darkThemeElevation = {
     elevation1: '0 2px 0 0 rgba(0, 0, 0, 0.04)',
+    elevation1InvertY: '0 -2px 0 0 rgba(0, 0, 0, 0.04)',
     elevation2: '0 4px 48px 0 rgba(0, 0, 0, 0.72)',
     elevation3: '0 4px 32px 0 rgba(0, 0, 0, 0.48)',
     elevation4: '0 4px 32px 0 rgba(0, 0, 0, 0.48)',

package/themeDescriptions/base/vk.js

@@ -70,7 +70,12 @@ exports.lightColors = {
         colorImagePlaceholderAlpha: 'rgba(0, 28, 61, 0.08)',
         colorImagePlaceholder: '#F2F3F5',
         colorSearchFieldBackground: '#EBEDF0',
-        colorFieldBorderAlpha: 'rgba(0, 0, 0, 0.12)',
+        colorFieldBorderAlpha: {
+            normal: 'rgba(0, 0, 0, 0.12)',
+            hover: 'rgba(0, 0, 0, 0.24)',
+            active: 'rgba(0, 0, 0, 0.36)',
+        },
+        colorFieldBackground: '#f2f3f5',
         colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.12)',
         colorSeparatorSecondary: '#E1E3E6',
         colorSeparatorPrimary: '#D7D8D9',
@@ -158,6 +163,7 @@ exports.darkColors = {
         colorImagePlaceholder: '#2A2B2C',
         colorSearchFieldBackground: '#232324',
         colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.12)',
+        colorFieldBackground: '#292929',
         colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.4)',
         colorSeparatorSecondary: '#141415',
         colorSeparatorPrimary: '#0F0F10',
@@ -452,8 +458,12 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
     }, sizeButtonGroupGapMedium: {
         regular: 12,
     }, 
+    // Токены иерархии
+    sizeOptionHierarchy: {
+        regular: 32,
+    }, 
     // Прочие отступы
-    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)', 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', 
+    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 });
+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)' });

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

@@ -200,7 +200,9 @@
 	--vkui--size_button_group_gap_space--regular: 1px;
 	--vkui--size_button_group_gap_small--regular: 8px;
 	--vkui--size_button_group_gap_medium--regular: 12px;
+	--vkui--size_option_hierarchy--regular: 32px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
+	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--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);
@@ -311,6 +313,10 @@
 	--vkui--type_border_button: solid;
 	--vkui--type_border_position: inset;
 	--vkui--theme_name_base: 'calendar';
+	--vkui--calendar_elevation_header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
+	--vkui--calendar_size_border_radius_small: 4px;
+	--vkui--calendar_size_border_radius_medium: 6px;
+	--vkui--calendar_size_border_radius_large: 8px;
 	--vkui--calendar_font_text_event--font_size--regular: 17px;
 	--vkui--calendar_font_text_event--line_height--regular: 24px;
 	--vkui--calendar_font_text_event--font_weight--regular: 400;
@@ -381,6 +387,9 @@
 	--vkui--color_background_negative_tint: #FAEBEB;
 	--vkui--color_background_negative_tint--hover: #F0E2E4;
 	--vkui--color_background_negative_tint--active: #E6D9DD;
+	--vkui--color_field_background: #ffffff;
+	--vkui--color_field_background--hover: #F5F5F7;
+	--vkui--color_field_background--active: #EBECEF;
 	--vkui--color_text_accent: #005FF9;
 	--vkui--color_text_accent--hover: #005CF1;
 	--vkui--color_text_accent--active: #0059EA;
@@ -1313,6 +1322,7 @@
 	--vkui--size_button_group_gap_space: 1px;
 	--vkui--size_button_group_gap_small: 8px;
 	--vkui--size_button_group_gap_medium: 12px;
+	--vkui--size_option_hierarchy: 32px;
 	--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_h0--font_family: var(--vkui--font_h0--font_family--regular);

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

@@ -200,7 +200,9 @@
 	--vkui--size_button_group_gap_space--regular: 1px;
 	--vkui--size_button_group_gap_small--regular: 8px;
 	--vkui--size_button_group_gap_medium--regular: 12px;
+	--vkui--size_option_hierarchy--regular: 32px;
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
+	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--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);
@@ -311,6 +313,10 @@
 	--vkui--type_border_button: solid;
 	--vkui--type_border_position: inset;
 	--vkui--theme_name_base: 'calendar';
+	--vkui--calendar_elevation_header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
+	--vkui--calendar_size_border_radius_small: 4px;
+	--vkui--calendar_size_border_radius_medium: 6px;
+	--vkui--calendar_size_border_radius_large: 8px;
 	--vkui--calendar_font_text_event--font_size--regular: 17px;
 	--vkui--calendar_font_text_event--line_height--regular: 24px;
 	--vkui--calendar_font_text_event--font_weight--regular: 400;

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

@@ -1,6 +1,7 @@
 :root {
 	--vkui--theme_name: 'calendar';
 	--vkui--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
+	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--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);
@@ -19,6 +20,7 @@
 	--vkui--type_border_button: solid;
 	--vkui--type_border_position: inset;
 	--vkui--theme_name_base: 'calendar';
+	--vkui--calendar_elevation_header: 0 0 16px 0 rgba(2, 13, 41, 0.12);
 	--vkui--colors_scheme: light;
 	--vkui--color_background_accent: #005FF9;
 	--vkui--color_background_accent--hover: #005CF1;
@@ -65,6 +67,9 @@
 	--vkui--color_background_negative_tint: #FAEBEB;
 	--vkui--color_background_negative_tint--hover: #F0E2E4;
 	--vkui--color_background_negative_tint--active: #E6D9DD;
+	--vkui--color_field_background: #ffffff;
+	--vkui--color_field_background--hover: #F5F5F7;
+	--vkui--color_field_background--active: #EBECEF;
 	--vkui--color_text_accent: #005FF9;
 	--vkui--color_text_accent--hover: #005CF1;
 	--vkui--color_text_accent--active: #0059EA;

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

@@ -44,6 +44,9 @@
 	--vkui--color_background_negative_tint: #FAEBEB;
 	--vkui--color_background_negative_tint--hover: #F0E2E4;
 	--vkui--color_background_negative_tint--active: #E6D9DD;
+	--vkui--color_field_background: #ffffff;
+	--vkui--color_field_background--hover: #F5F5F7;
+	--vkui--color_field_background--active: #EBECEF;
 	--vkui--color_text_accent: #005FF9;
 	--vkui--color_text_accent--hover: #005CF1;
 	--vkui--color_text_accent--active: #0059EA;