@vkontakte/vkui-tokens 4.54.1-dev-3ef202.0 → 4.55.0

package/build/compilers/structJSON/compileStructJSON.js

@@ -1,6 +1,22 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileStructJSON = void 0;
+var color_1 = __importDefault(require("color"));
+var convertSnakeToCamel_1 = require("../../helpers/convertSnakeToCamel");
 var groups = [
     'fontFamily',
     'fontWeight',
@@ -16,6 +32,45 @@ var groups = [
     'theme',
     'other',
 ];
+function parseRawToken(rawToken) {
+    var percentMatch = rawToken.match(/\d+$/);
+    var step = percentMatch && percentMatch.length > 0 ? parseFloat(percentMatch[0]) / 100 : undefined;
+    rawToken = rawToken.replace(/^,\s/g, '').replace(/\d+$/g, '').trim();
+    if (rawToken.startsWith('var(')) {
+        var varNameRaw = /^var\(([\w\-_]+)/.exec(rawToken);
+        if (varNameRaw) {
+            var varName = varNameRaw[1];
+            var varValue = rawToken.slice(varNameRaw[0].length, -1).trim().slice(1).trim();
+            return {
+                color: varValue,
+                token: (0, convertSnakeToCamel_1.convertSnakeToCamel)(varName),
+                step: step,
+                alpha: new color_1.default(varValue).alpha(),
+            };
+        }
+    }
+    return {
+        color: rawToken,
+        step: step,
+        alpha: new color_1.default(rawToken).alpha(),
+    };
+}
+function compileStructGradients(cssGradients) {
+    var structGradients = {};
+    var keys = Object.keys(cssGradients);
+    for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
+        var key = keys_1[_i];
+        var rawPoints = cssGradients[key].split('%').slice(0, -1);
+        structGradients[key] = rawPoints.map(parseRawToken).map(function (structToken, index, array) {
+            var _a;
+            if (index > 0 && !structToken.token) {
+                return __assign(__assign({}, structToken), { token: (_a = structToken.token) !== null && _a !== void 0 ? _a : array[0].token });
+            }
+            return structToken;
+        });
+    }
+    return structGradients;
+}
 /**
  * Компилирует структурируемый json с темой
  */
@@ -28,6 +83,9 @@ var compileStructJSON = function (theme) {
         }
         structTheme[group][key] = theme[key];
     });
+    if (structTheme['gradient']) {
+        structTheme['gradient'] = compileStructGradients(structTheme['gradient']);
+    }
     return JSON.stringify(structTheme, null, '\t');
 };
 exports.compileStructJSON = compileStructJSON;

package/build/compilers/structJSON/compileStructJSON.test.js

@@ -3,12 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var globals_1 = require("@jest/globals");
 var compileStructJSON_1 = require("./compileStructJSON");
 (0, globals_1.describe)('compileJSON', function () {
-    (0, globals_1.it)('should correct stringify', function () {
+    (0, globals_1.it)('should stringify correctly', function () {
         var testData = {
             colorA: '#fff',
             colorsScheme: 'scheme',
             randomToken: 123,
+            gradientTest: 'var(--vkui--color_background_content, rgba(255, 255, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%',
+            gradientOneColor: [
+                'rgba(0, 0, 255, 0) 0%',
+                'rgba(0, 0, 255, 0.05) 15%',
+                'rgba(0, 0, 255, 0.2) 30%',
+                'rgba(0, 0, 255, 0.8) 70%',
+                'rgba(0, 0, 255, 0.95) 85%',
+                'rgba(0, 0, 255, 1) 100%',
+            ].join(', '),
+            gradientOneVariable: [
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0)) 0%',
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.05)) 15%',
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.2)) 30%',
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.8)) 70%',
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.95)) 85%',
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 100%',
+            ].join(', '),
         };
-        (0, globals_1.expect)((0, compileStructJSON_1.compileStructJSON)(testData)).toBe("{\n\t\"color\": {\n\t\t\"colorA\": \"#fff\"\n\t},\n\t\"colorsScheme\": {\n\t\t\"colorsScheme\": \"scheme\"\n\t},\n\t\"other\": {\n\t\t\"randomToken\": 123\n\t}\n}");
+        (0, globals_1.expect)((0, compileStructJSON_1.compileStructJSON)(testData)).toBe("{\n\t\"color\": {\n\t\t\"colorA\": \"#fff\"\n\t},\n\t\"colorsScheme\": {\n\t\t\"colorsScheme\": \"scheme\"\n\t},\n\t\"other\": {\n\t\t\"randomToken\": 123\n\t},\n\t\"gradient\": {\n\t\t\"gradientTest\": [\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(255, 255, 255, 1)\",\n\t\t\t\t\"token\": \"colorBackgroundContent\",\n\t\t\t\t\"step\": 0,\n\t\t\t\t\"alpha\": 1\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 0, 0)\",\n\t\t\t\t\"step\": 1,\n\t\t\t\t\"alpha\": 0,\n\t\t\t\t\"token\": \"colorBackgroundContent\"\n\t\t\t}\n\t\t],\n\t\t\"gradientOneColor\": [\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0)\",\n\t\t\t\t\"step\": 0,\n\t\t\t\t\"alpha\": 0\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.05)\",\n\t\t\t\t\"step\": 0.15,\n\t\t\t\t\"alpha\": 0.05\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.2)\",\n\t\t\t\t\"step\": 0.3,\n\t\t\t\t\"alpha\": 0.2\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.8)\",\n\t\t\t\t\"step\": 0.7,\n\t\t\t\t\"alpha\": 0.8\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.95)\",\n\t\t\t\t\"step\": 0.85,\n\t\t\t\t\"alpha\": 0.95\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 1)\",\n\t\t\t\t\"step\": 1,\n\t\t\t\t\"alpha\": 1\n\t\t\t}\n\t\t],\n\t\t\"gradientOneVariable\": [\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 0,\n\t\t\t\t\"alpha\": 0\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.05)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 0.15,\n\t\t\t\t\"alpha\": 0.05\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.2)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 0.3,\n\t\t\t\t\"alpha\": 0.2\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.8)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 0.7,\n\t\t\t\t\"alpha\": 0.8\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 0.95)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 0.85,\n\t\t\t\t\"alpha\": 0.95\n\t\t\t},\n\t\t\t{\n\t\t\t\t\"color\": \"rgba(0, 0, 255, 1)\",\n\t\t\t\t\"token\": \"colorIconPrimary\",\n\t\t\t\t\"step\": 1,\n\t\t\t\t\"alpha\": 1\n\t\t\t}\n\t\t]\n\t}\n}");
     });
 });

package/build/helpers/convertSnakeToCamel.d.ts

@@ -0,0 +1,4 @@
+/**
+ * snake_case -> camelCase
+ */
+export declare function convertSnakeToCamel(snake: string, prefix?: string): string;

package/build/helpers/convertSnakeToCamel.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertSnakeToCamel = void 0;
+/**
+ * snake_case -> camelCase
+ */
+function convertSnakeToCamel(snake, prefix) {
+    if (prefix === void 0) { prefix = 'vkui'; }
+    return snake
+        .replace(new RegExp("^--".concat(prefix, "--")), '')
+        .toLowerCase()
+        .replace(/([-_][a-z])/g, function (group) { return group.toUpperCase().replace('-', '').replace('_', ''); });
+}
+exports.convertSnakeToCamel = convertSnakeToCamel;

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

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

package/build/helpers/convertSnakeToCamel.test.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var globals_1 = require("@jest/globals");
+var convertSnakeToCamel_1 = require("./convertSnakeToCamel");
+(0, globals_1.describe)('convertSnakeToCamel', function () {
+    (0, globals_1.test)('convert empty string', function () {
+        (0, globals_1.expect)((0, convertSnakeToCamel_1.convertSnakeToCamel)('')).toEqual('');
+    });
+    (0, globals_1.test)('replaces prefix', function () {
+        (0, globals_1.expect)((0, convertSnakeToCamel_1.convertSnakeToCamel)('--vkui--')).toEqual('');
+    });
+    (0, globals_1.test)('replaces prefix and converts to lower case', function () {
+        (0, globals_1.expect)((0, convertSnakeToCamel_1.convertSnakeToCamel)('--vkui--Test')).toEqual('test');
+    });
+    (0, globals_1.test)('replaces prefix and converts to camel case', function () {
+        (0, globals_1.expect)((0, convertSnakeToCamel_1.convertSnakeToCamel)('--vkui--Test_var')).toEqual('testVar');
+    });
+});

package/build/helpers/getGradientPointsFromColor.d.ts

@@ -1,3 +1,12 @@
 import type { Property } from 'csstype';
 import { GradientPoints } from '../../interfaces/general/gradients';
-export declare function getGradientPointsFromColor(colorArg: Property.Color, opacityMultiplier?: number): GradientPoints;
+export type OpacityPoints = [number, number][];
+type GradientPointRaw = () => {
+    value: Property.Color;
+    key?: string;
+    prefix?: string;
+};
+export declare const defaultOpacityPoints: OpacityPoints;
+export declare function makeGradientPointRaw(value: Property.Color, key?: string, prefix?: string): GradientPointRaw;
+export declare function getGradientPointsFromColor(colorArg: Property.Color | GradientPointRaw, opacityMultiplier?: number, opacityPoints?: OpacityPoints): GradientPoints;
+export {};

package/build/helpers/getGradientPointsFromColor.js

@@ -3,17 +3,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGradientPointsFromColor = void 0;
+exports.getGradientPointsFromColor = exports.makeGradientPointRaw = exports.defaultOpacityPoints = void 0;
 var color_1 = __importDefault(require("color"));
-// opacityMap.json требуется для android и ios клиентов
+var extractVarsNames_1 = require("../themeProcessors/extractVarsNames/extractVarsNames");
 var opacityMap_json_1 = __importDefault(require("./opacityMap.json"));
-function getGradientPointsFromColor(colorArg, opacityMultiplier) {
+exports.defaultOpacityPoints = opacityMap_json_1.default;
+function makeGradientPointRaw(value, key, prefix) {
+    return function () { return ({
+        value: value,
+        key: key,
+        prefix: prefix,
+    }); };
+}
+exports.makeGradientPointRaw = makeGradientPointRaw;
+function getGradientPointsFromColor(colorArg, opacityMultiplier, opacityPoints) {
     if (opacityMultiplier === void 0) { opacityMultiplier = 1; }
-    var colorRGB = (0, color_1.default)(colorArg).rgb().array().join(', ');
-    return opacityMap_json_1.default
+    if (opacityPoints === void 0) { opacityPoints = exports.defaultOpacityPoints; }
+    var gradientPointData = typeof colorArg === 'function' ? colorArg() : { value: colorArg };
+    var colorRGB = (0, color_1.default)(gradientPointData.value).rgb().array().slice(0, 3).join(', ');
+    var colorAlpha = (0, color_1.default)(gradientPointData.value).alpha();
+    return opacityPoints
         .map(function (_a) {
         var pointOpacity = _a[0], pointCoordinate = _a[1];
-        return "rgba(".concat(colorRGB, ", ").concat(Math.round(pointOpacity * opacityMultiplier * 1000) / 1000, ") ").concat(pointCoordinate, "%");
+        var targetOpacity = colorAlpha * pointOpacity;
+        var colorValue = "rgba(".concat(colorRGB, ", ").concat(Math.round(targetOpacity * opacityMultiplier * 1000) / 1000, ")");
+        if (typeof gradientPointData.key === 'string') {
+            var tokenName = (0, extractVarsNames_1.getVariableName)({
+                key: gradientPointData.key,
+                prefix: gradientPointData.prefix,
+            });
+            return "var(".concat(tokenName, ", ").concat(colorValue, ") ").concat(pointCoordinate, "%");
+        }
+        return "".concat(colorValue, " ").concat(pointCoordinate, "%");
     })
         .join(', ');
 }

package/build/helpers/tokenHelpers.d.ts

@@ -1,4 +1,24 @@
-import { ThemeGeneral } from '../../interfaces/general';
+import type { Property } from 'csstype';
+import { ThemeDescription } 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 type TokenFunction<T extends ThemeDescription> = (theme: Partial<T>) => Token<any, T>;
+export type NamedTokenFunction<T extends ThemeDescription> = (theme: Partial<T>) => [string | undefined, Token<any, T>];
+export type OpacityPoint = [number, number];
+/**
+ * Функция выполняет подстановку значения другого токена.
+ * @param token Имя токена. Можно использовать токены из текущей темы либо из всех тем,
+ * от которой наследуется текущая.
+ */
+export declare function alias<T extends ThemeDescription>(token: string): TokenFunction<T>;
+/**
+ * Функция создаёт runtime-ссылку на другой токен темы выполняет подстановку fallback-значения этого токена.
+ * @param token Имя токена. Можно использовать токены из текущей темы либо из всех тем,
+ * от которой наследуется текущая.
+ */
+export declare function namedAlias<T extends ThemeDescription>(token: string): NamedTokenFunction<T>;
+/**
+ * Функция создаёт runtime-ссылку на другой токен темы.
+ * @param token Имя токена. Можно использовать любые токены, которые находятся в контексте страницы.
+ */
 export declare function staticRef<T>(value: Token<T, any>): T;
+export declare function gradient<T extends ThemeDescription>(...stops: (Property.Color | NamedTokenFunction<T>)[]): TokenFunction<T>;

package/build/helpers/tokenHelpers.js

@@ -1,10 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.staticRef = exports.alias = void 0;
+exports.gradient = exports.staticRef = exports.namedAlias = exports.alias = void 0;
+var getGradientPointsFromColor_1 = require("./getGradientPointsFromColor");
+function readThemeToken(theme, token) {
+    var _a, _b;
+    return (_a = theme[token]) !== null && _a !== void 0 ? _a : ((_b = theme['colors']) !== null && _b !== void 0 ? _b : {})[token];
+}
+/**
+ * Функция выполняет подстановку значения другого токена.
+ * @param token Имя токена. Можно использовать токены из текущей темы либо из всех тем,
+ * от которой наследуется текущая.
+ */
 function alias(token) {
-    return function (theme) { return theme[token]; };
+    return function (theme) { return readThemeToken(theme, token); };
 }
 exports.alias = alias;
+/**
+ * Функция создаёт runtime-ссылку на другой токен темы выполняет подстановку fallback-значения этого токена.
+ * @param token Имя токена. Можно использовать токены из текущей темы либо из всех тем,
+ * от которой наследуется текущая.
+ */
+function namedAlias(token) {
+    return function (theme) { return [token, readThemeToken(theme, token)]; };
+}
+exports.namedAlias = namedAlias;
+/**
+ * Функция создаёт runtime-ссылку на другой токен темы.
+ * @param token Имя токена. Можно использовать любые токены, которые находятся в контексте страницы.
+ */
 function staticRef(value) {
     if (typeof value === 'function') {
         throw new Error('Cannot use callable token value in static ref');
@@ -12,3 +35,31 @@ function staticRef(value) {
     return value;
 }
 exports.staticRef = staticRef;
+function makeOpacityPoints(count) {
+    var result = [];
+    for (var i = 0; i < count; i++) {
+        var percent = Math.round(i * (1 / (count - 1)) * 100);
+        result.push([1, percent]);
+    }
+    return result;
+}
+function gradient() {
+    var stops = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        stops[_i] = arguments[_i];
+    }
+    var opacityPoints = stops.length > 1 ? makeOpacityPoints(stops.length) : getGradientPointsFromColor_1.defaultOpacityPoints;
+    return function (theme) {
+        return opacityPoints
+            .map(function (_a, index) {
+            var _b;
+            var pointOpacity = _a[0], pointCoordinate = _a[1];
+            var stop = (_b = stops[index]) !== null && _b !== void 0 ? _b : stops[stops.length - 1];
+            var _c = typeof stop === 'function' ? stop(theme) : [undefined, stop], stopKey = _c[0], stopValue = _c[1];
+            var pointRaw = (0, getGradientPointsFromColor_1.makeGradientPointRaw)(stopValue, stopKey);
+            return (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(pointRaw, 1, [[pointOpacity, pointCoordinate]]);
+        })
+            .join(', ');
+    };
+}
+exports.gradient = gradient;

package/build/helpers/tokenHelpers.test.js

@@ -10,6 +10,16 @@ var tokenHelpers_1 = require("./tokenHelpers");
             });
         });
     });
+    (0, globals_1.describe)('namedAlias', function () {
+        (0, globals_1.test)('maps token to another token, preserving name', function () {
+            (0, globals_1.expect)((0, tokenHelpers_1.namedAlias)('sizeArrow')({ sizeArrow: { regular: 10 } })).toEqual([
+                'sizeArrow',
+                {
+                    regular: 10,
+                },
+            ]);
+        });
+    });
     (0, globals_1.describe)('staticRef', function () {
         (0, globals_1.test)('returns static value', function () {
             (0, globals_1.expect)((0, tokenHelpers_1.staticRef)(10)).toEqual(10);
@@ -18,4 +28,40 @@ var tokenHelpers_1 = require("./tokenHelpers");
             (0, globals_1.expect)(function () { return (0, tokenHelpers_1.staticRef)((0, tokenHelpers_1.alias)('sizeArrow')); }).toThrowError('Cannot use callable token value in static ref');
         });
     });
+    (0, globals_1.describe)('gradient', function () {
+        (0, globals_1.test)('calculates gradient string from 1 color with value', function () {
+            var gradientToken = (0, tokenHelpers_1.gradient)('blue');
+            var gradientValue = gradientToken({});
+            (0, globals_1.expect)(gradientValue).toEqual([
+                'rgba(0, 0, 255, 0) 0%',
+                'rgba(0, 0, 255, 0.05) 15%',
+                'rgba(0, 0, 255, 0.2) 30%',
+                'rgba(0, 0, 255, 0.8) 70%',
+                'rgba(0, 0, 255, 0.95) 85%',
+                'rgba(0, 0, 255, 1) 100%',
+            ].join(', '));
+        });
+        (0, globals_1.test)('calculates gradient string from 1 color with variable', function () {
+            var gradientToken = (0, tokenHelpers_1.gradient)((0, tokenHelpers_1.namedAlias)('colorIconPrimary'));
+            var gradientValue = gradientToken({ colors: { colorIconPrimary: 'blue' } });
+            (0, globals_1.expect)(gradientValue).toEqual([
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0)) 0%',
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.05)) 15%',
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.2)) 30%',
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.8)) 70%',
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 0.95)) 85%',
+                'var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 100%',
+            ].join(', '));
+        });
+        (0, globals_1.test)('calculates gradient string from 2 colors', function () {
+            var gradientToken = (0, tokenHelpers_1.gradient)((0, tokenHelpers_1.namedAlias)('colorIconPrimary'), 'transparent');
+            var gradientValue = gradientToken({ colors: { colorIconPrimary: 'blue' } });
+            (0, globals_1.expect)(gradientValue).toEqual('var(--vkui--color_icon_primary, rgba(0, 0, 255, 1)) 0%, rgba(0, 0, 0, 0) 100%');
+        });
+        (0, globals_1.test)('calculates gradient string from 3 colors', function () {
+            var gradientToken = (0, tokenHelpers_1.gradient)('blue', 'black', 'red');
+            var gradientValue = gradientToken({});
+            (0, globals_1.expect)(gradientValue).toEqual('rgba(0, 0, 255, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 100%');
+        });
+    });
 });

package/build/themeProcessors/customMedia/customMedia.js

@@ -1,19 +1,10 @@
 "use strict";
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processCustomMedia = exports.getCustomMediaKey = exports.getUsingViewports = void 0;
 var capitalize_1 = require("../../helpers/capitalize");
 var viewports_1 = require("../../../interfaces/general/tools/viewports");
 var getUsingViewports = function (breakpoints) {
-    var usingViewports = __spreadArray([], Object.keys(breakpoints), true);
+    var usingViewports = Object.keys(breakpoints);
     return usingViewports.sort(function (a, b) {
         return viewports_1.viewports.indexOf(a) > viewports_1.viewports.indexOf(b) ? 1 : -1;
     });

package/build/themeProcessors/extractGeneralTokens/extractGeneralTokens.js

@@ -16,7 +16,14 @@ function extractGeneralTokens(themeDescription) {
         var token = tokens_1[_i];
         var tokenValue = themeDescription[token];
         if (typeof tokenValue === 'function') {
-            copyDescription[token] = tokenValue(themeDescription);
+            copyDescription[token] = tokenValue;
+        }
+    }
+    for (var _a = 0, tokens_2 = tokens; _a < tokens_2.length; _a++) {
+        var token = tokens_2[_a];
+        var tokenValue = copyDescription[token];
+        if (typeof tokenValue === 'function') {
+            copyDescription[token] = tokenValue(copyDescription);
         }
     }
     delete copyDescription.colors;

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

@@ -56,6 +56,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, background
      */
     colorBackgroundContent: ColorDescription;
+    /**
+     * @desc Цвет фона, противоположный фону контента.
+     * @tags color, background
+     */
+    colorBackgroundContentInverse: ColorDescription;
     /**
      * @desc Второстепенный цвет фона
      * @tags color, background

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

@@ -1,4 +1,4 @@
-export type GradientPoints = string;
+export type GradientPoints = string | unknown;
 export interface Gradients {
     /**
      * @desc Параметры градиента черного цвета

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.54.1-dev-3ef202.0",
+  "version": "4.55.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -24,8 +24,8 @@
     "clear:dist": "find dist -regex '.*[^d]\\.ts' -delete",
     "open:coverage": "open .coverage/index.html",
     "styleguide": "sh ./tasks/styleguide.sh",
-    "docs:dev": "cd docs/webpack && webpack-dev-server --config webpack.client.js --mode development",
-    "docs:build": "cd docs/webpack && webpack --config webpack.client.js --mode production",
+    "docs:dev": "cd docs/webpack && webpack-dev-server --config webpack.client.mjs --mode development",
+    "docs:build": "cd docs/webpack && webpack --config webpack.client.mjs --mode production",
     "docs:prepare-data": "ts-node tasks/docs/prepareTokensData.ts",
     "pre-commit": "lint-staged"
   },
@@ -50,7 +50,7 @@
     "@types/fs-extra": "11.0.4",
     "@types/lodash": "4.17.7",
     "@types/node": "18.11.10",
-    "@types/react": "18.3.5",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.2.0",
     "@vkontakte/icons": "2.124.0",
@@ -80,19 +80,26 @@
     "eslint-plugin-sonarjs": "0.24.0",
     "eslint-plugin-unicorn": "51.0.1",
     "fs-extra": "11.2.0",
+    "highlight.js": "11.10.0",
+    "html-loader": "5.1.0",
     "html-webpack-plugin": "5.6.0",
     "husky": "9.1.4",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
-    "lint-staged": "15.2.9",
+    "lint-staged": "15.2.10",
     "lodash": "4.17.21",
     "prettier": "3.3.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-router-dom": "6.26.2",
+    "remark": "15.0.1",
+    "remark-html": "16.0.1",
+    "remark-loader": "6.0.0",
     "rimraf": "5.0.7",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.2.4",
+    "tree-sitter": "0.21.1",
+    "ts-jest": "29.2.5",
     "ts-loader": "9.5.1",
     "ts-morph": "20.0.0",
     "ts-node": "10.9.2",
@@ -100,15 +107,19 @@
     "tscpaths": "0.0.9",
     "type-fest": "4.26.1",
     "typescript": "5.2.2",
-    "typescript-eslint": "7.0.1",
+    "typescript-eslint": "7.7.1",
     "webpack": "5.94.0",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "5.0.4",
+    "webpack-dev-server": "5.1.0",
     "webpack-notifier": "1.15.0"
   },
   "engines": {
     "npm": ">=9.3.1",
     "yarn": ">=1.21.1 <2"
   },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "resolutions": {
+    "@types/node": "18.11.10",
+    "@types/react": "18.3.3"
+  }
 }

package/themeDescriptions/base/paradigm.js

@@ -37,6 +37,7 @@ exports.lightColors = {
         colorBackgroundAccentThemedAlpha: 'rgba(0, 119, 255, 0.2)',
         colorBackgroundAccentAlternative: '#FF9E00',
         colorBackgroundContent: '#FFFFFF',
+        colorBackgroundContentInverse: colorBackgroundContentDark,
         colorBackgroundSecondary: '#F0F1F3',
         colorBackgroundSecondaryAlpha: {
             normal: 'rgba(0, 16, 61, 0.06)',
@@ -170,6 +171,7 @@ exports.darkColors = {
         colorBackgroundAccentThemedAlpha: 'rgba(255, 255, 255, 0.2)',
         colorBackgroundAccentAlternative: '#FF9E00',
         colorBackgroundContent: colorBackgroundContentDark,
+        colorBackgroundContentInverse: '#FFFFFF',
         colorBackgroundSecondary: '#2A2A2B',
         colorBackgroundSecondaryAlpha: {
             normal: 'rgba(255, 255, 255, 0.12)',

package/themeDescriptions/base/vk.js

@@ -45,6 +45,10 @@ var colorFromFigma = function (colorsScheme) {
             }[colorsScheme],
             colorBackground: background.background,
             colorBackgroundContent: background.background_content,
+            colorBackgroundContentInverse: {
+                light: '#19191A',
+                dark: '#FFFFFF',
+            }[colorsScheme],
             colorBackgroundSecondary: background.background_secondary,
             colorBackgroundSecondaryAlpha: {
                 light: {
@@ -226,9 +230,10 @@ var colorFromFigma = function (colorsScheme) {
             // Other
             colorOverlayPrimary: other.overlay_primary,
             colorOverlaySecondary: {
-                light: 'rgba(44, 45, 46, 0.5)',
-                dark: 'rgba(55, 56, 57, 0.5)',
-            }[colorsScheme],
+                normal: 'rgba(0, 0, 0, 0.27)',
+                hover: 'rgba(0, 0, 0, 0.31)',
+                active: 'rgba(0, 0, 0, 0.35)',
+            },
             colorAvatarOverlay: other.avatar_overlay_alpha,
             colorAvatarOverlayInverseAlpha: other.avatar_overlay_inverse_alpha,
             colorActionSheetText: other.action_sheet_text,

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

@@ -430,6 +430,9 @@
 	--vkui--color_background_content: #FFFFFF;
 	--vkui--color_background_content--hover: #F5F5F7;
 	--vkui--color_background_content--active: #EBECEF;
+	--vkui--color_background_content_inverse: #232324;
+	--vkui--color_background_content_inverse--hover: #222225;
+	--vkui--color_background_content_inverse--active: #202126;
 	--vkui--color_background_secondary: #EBECEF;
 	--vkui--color_background_secondary--hover: #E2E3E8;
 	--vkui--color_background_secondary--active: #D8DAE1;

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

@@ -57,6 +57,9 @@
 	--vkui--color_background_content: #FFFFFF;
 	--vkui--color_background_content--hover: #F5F5F7;
 	--vkui--color_background_content--active: #EBECEF;
+	--vkui--color_background_content_inverse: #232324;
+	--vkui--color_background_content_inverse--hover: #222225;
+	--vkui--color_background_content_inverse--active: #202126;
 	--vkui--color_background_secondary: #EBECEF;
 	--vkui--color_background_secondary--hover: #E2E3E8;
 	--vkui--color_background_secondary--active: #D8DAE1;

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

@@ -14,6 +14,9 @@
 	--vkui--color_background_content: #FFFFFF;
 	--vkui--color_background_content--hover: #F5F5F7;
 	--vkui--color_background_content--active: #EBECEF;
+	--vkui--color_background_content_inverse: #232324;
+	--vkui--color_background_content_inverse--hover: #222225;
+	--vkui--color_background_content_inverse--active: #202126;
 	--vkui--color_background_secondary: #EBECEF;
 	--vkui--color_background_secondary--hover: #E2E3E8;
 	--vkui--color_background_secondary--active: #D8DAE1;