@vkontakte/vkui-tokens 4.0.0-rc.9 → 4.0.0

package/build/compilers/index.js

@@ -72,11 +72,13 @@ function writeCssVarsSourceFile(themePath, theme, cssWarsTheme) {
         { mode: 'onlyVariables', fileName: 'onlyVariables.css' },
         { mode: 'onlyColors', fileName: 'onlyColors.css' },
         { mode: 'onlyAdaptiveGroups', fileName: 'onlyAdaptiveGroups.css' },
+        { mode: 'noSizes', fileName: 'noSizes.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" + compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration(cssWarsTheme)
+            ? compileStyles_1.compileStyles('css', theme, 'withAdaptiveGroups') + "\n\n" + ((_b = compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration(cssWarsTheme)) !== null && _b !== void 0 ? _b : '')
             : compileStyles_1.compileStyles('css', theme, mode);
         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);

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

@@ -1,7 +1,8 @@
+import 'css.escape';
 import { PixelifyTheme } from '../../../interfaces/general';
 import { Formats } from './helpers/tokenProcessors';
 export declare const serviceKeys: string[];
-export declare type CompileStylesMode = 'default' | 'onlyVariables' | 'onlyColors' | 'withAdaptiveGroups' | 'onlyAdaptiveGroups';
+export declare type CompileStylesMode = 'default' | 'onlyVariables' | 'onlyColors' | 'withAdaptiveGroups' | 'onlyAdaptiveGroups' | 'noSizes';
 /**
  * Компиллирует строку со стилями (в разных форматах), на основе темы
  */

package/build/compilers/styles/compileStyles.js

@@ -5,12 +5,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileStyles = exports.serviceKeys = void 0;
+require("css.escape");
 var common_tags_1 = require("common-tags");
+var getAllButSizes_1 = require("../../helpers/getAllButSizes");
 var getOnlyColors_1 = require("../../helpers/getOnlyColors");
 var unCamelcasify_1 = require("../../helpers/unCamelcasify");
 var tokenProcessors_1 = require("./helpers/tokenProcessors");
 var tokenRecognition_1 = require("./helpers/tokenRecognition");
-exports.serviceKeys = ['breakpoints', 'prefix', 'themeName', 'themeType'];
+exports.serviceKeys = ['breakpoints', 'prefix', 'themeType'];
 /**
  * Компиллирует строку со стилями (в разных форматах), на основе темы
  */
@@ -30,8 +32,13 @@ var compileStyles = function (format, theme, mode) {
     var result = '';
     var variables = '';
     var groupTokens = '';
-    if (mode === 'onlyColors') {
-        theme = getOnlyColors_1.getOnlyColors(theme);
+    switch (mode) {
+        case 'onlyColors':
+            theme = getOnlyColors_1.getOnlyColors(theme);
+            break;
+        case 'noSizes':
+            theme = getAllButSizes_1.getAllButSizes(theme, theme.themeNameBase);
+            break;
     }
     Object.keys(theme).forEach(function (key) {
         // пропускаем служебные ключи
@@ -39,6 +46,11 @@ var compileStyles = function (format, theme, mode) {
             return;
         }
         var token = theme[key];
+        // если переменная — строка (например, имя темы)
+        if (tokenRecognition_1.isString(token, key)) {
+            variables += getVariableStatement(getDeclaration(key, prefix), "'" + CSS.escape(token) + "'");
+            return;
+        }
         // если переменная — цвет
         if (tokenRecognition_1.isColor(token)) {
             Object.keys(token).forEach(function (colorState) {

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

@@ -160,6 +160,48 @@ var testData = [
             styl: common_tags_1.stripIndent(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n\t\t\tfont-text--regular() {\n\t\t\t\tfont-size: 15px;\n\t\t\t\tline-height: 20px;\n\t\t\t\tfont-family: Arial;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\t\t\tfont-text--compact() {\n\t\t\t\tfont-size: 16px;\n\t\t\t\tline-height: 24px;\n\t\t\t\tfont-family: Arial;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\t\t\t"], ["\n\t\t\tfont-text--regular() {\n\t\t\t\tfont-size: 15px;\n\t\t\t\tline-height: 20px;\n\t\t\t\tfont-family: Arial;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\t\t\tfont-text--compact() {\n\t\t\t\tfont-size: 16px;\n\t\t\t\tline-height: 24px;\n\t\t\t\tfont-family: Arial;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\t\t\t"]))),
         },
     },
+    {
+        name: 'should compile onlyColors',
+        mode: 'onlyColors',
+        descriptionTheme: {
+            sizeBasePadding: {
+                regular: 20,
+            },
+            colorBackground: {
+                normal: '#FFF',
+                hover: '#AAA',
+                active: '#CCC',
+            },
+        },
+        result: {
+            css: common_tags_1.stripIndent(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n\t\t\t\t:root {\n\t\t\t\t\t--vkui--color_background: #FFF;\n\t\t\t\t\t--vkui--color_background--hover: #AAA;\n\t\t\t\t\t--vkui--color_background--active: #CCC;\n\t\t\t\t}\n\t\t\t"], ["\n\t\t\t\t:root {\n\t\t\t\t\t--vkui--color_background: #FFF;\n\t\t\t\t\t--vkui--color_background--hover: #AAA;\n\t\t\t\t\t--vkui--color_background--active: #CCC;\n\t\t\t\t}\n\t\t\t"]))),
+            scss: common_tags_1.stripIndent(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n\t\t\t\t$color-background: #FFF;\n\t\t\t\t$color-background--hover: #AAA;\n\t\t\t\t$color-background--active: #CCC;\n\t\t\t"], ["\n\t\t\t\t$color-background: #FFF;\n\t\t\t\t$color-background--hover: #AAA;\n\t\t\t\t$color-background--active: #CCC;\n\t\t\t"]))),
+            pcss: common_tags_1.stripIndent(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n\t\t\t\t:root {\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:root {\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_44 || (templateObject_44 = __makeTemplateObject(["\n\t\t\t\t@color-background: #FFF;\n\t\t\t\t@color-background--hover: #AAA;\n\t\t\t\t@color-background--active: #CCC;\n\t\t\t"], ["\n\t\t\t\t@color-background: #FFF;\n\t\t\t\t@color-background--hover: #AAA;\n\t\t\t\t@color-background--active: #CCC;\n\t\t\t"]))),
+            styl: common_tags_1.stripIndent(templateObject_45 || (templateObject_45 = __makeTemplateObject(["\n\t\t\t\t$color-background = #FFF;\n\t\t\t\t$color-background--hover = #AAA;\n\t\t\t\t$color-background--active = #CCC;\n\t\t\t"], ["\n\t\t\t\t$color-background = #FFF;\n\t\t\t\t$color-background--hover = #AAA;\n\t\t\t\t$color-background--active = #CCC;\n\t\t\t"]))),
+        },
+    },
+    {
+        name: 'should compile noSizes',
+        mode: 'noSizes',
+        descriptionTheme: {
+            sizeBasePadding: {
+                regular: 20,
+            },
+            colorBackground: {
+                normal: '#FFF',
+                hover: '#AAA',
+                active: '#CCC',
+            },
+        },
+        result: {
+            css: common_tags_1.stripIndent(templateObject_46 || (templateObject_46 = __makeTemplateObject(["\n\t\t\t\t:root {\n\t\t\t\t\t--vkui--color_background: #FFF;\n\t\t\t\t\t--vkui--color_background--hover: #AAA;\n\t\t\t\t\t--vkui--color_background--active: #CCC;\n\t\t\t\t}\n\t\t\t"], ["\n\t\t\t\t:root {\n\t\t\t\t\t--vkui--color_background: #FFF;\n\t\t\t\t\t--vkui--color_background--hover: #AAA;\n\t\t\t\t\t--vkui--color_background--active: #CCC;\n\t\t\t\t}\n\t\t\t"]))),
+            scss: common_tags_1.stripIndent(templateObject_47 || (templateObject_47 = __makeTemplateObject(["\n\t\t\t\t$color-background: #FFF;\n\t\t\t\t$color-background--hover: #AAA;\n\t\t\t\t$color-background--active: #CCC;\n\t\t\t"], ["\n\t\t\t\t$color-background: #FFF;\n\t\t\t\t$color-background--hover: #AAA;\n\t\t\t\t$color-background--active: #CCC;\n\t\t\t"]))),
+            pcss: common_tags_1.stripIndent(templateObject_48 || (templateObject_48 = __makeTemplateObject(["\n\t\t\t\t:root {\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:root {\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_49 || (templateObject_49 = __makeTemplateObject(["\n\t\t\t\t@color-background: #FFF;\n\t\t\t\t@color-background--hover: #AAA;\n\t\t\t\t@color-background--active: #CCC;\n\t\t\t"], ["\n\t\t\t\t@color-background: #FFF;\n\t\t\t\t@color-background--hover: #AAA;\n\t\t\t\t@color-background--active: #CCC;\n\t\t\t"]))),
+            styl: common_tags_1.stripIndent(templateObject_50 || (templateObject_50 = __makeTemplateObject(["\n\t\t\t\t$color-background = #FFF;\n\t\t\t\t$color-background--hover = #AAA;\n\t\t\t\t$color-background--active = #CCC;\n\t\t\t"], ["\n\t\t\t\t$color-background = #FFF;\n\t\t\t\t$color-background--hover = #AAA;\n\t\t\t\t$color-background--active = #CCC;\n\t\t\t"]))),
+        },
+    },
 ];
 describe('compileStyles', function () {
     Object.values(tokenProcessors_1.EStyleTypes).forEach(function (format) {
@@ -173,4 +215,4 @@ describe('compileStyles', function () {
         });
     });
 });
-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;
+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;

package/build/compilers/styles/helpers/tokenRecognition.d.ts

@@ -2,6 +2,7 @@ import { ColorWithStates } from '../../../../interfaces/general/colors';
 import { Adaptive } from '../../../../interfaces/general/tools';
 import { CustomMediaByViewportUnion } from '../../../../interfaces/general/tools/customMedia';
 import { ViewportsTuple } from '../../../../interfaces/general/tools/viewports';
+export declare function isString(token: any, key: string): token is string;
 export declare function isColor(token: any): token is ColorWithStates;
 export declare function isGroupToken(token: any): token is Record<string, any>;
 export declare function isAdaptiveFlatToken(token: any): token is Adaptive<any>;

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

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

package/build/expandTheme.test.js

@@ -102,9 +102,9 @@ describe('expandTheme', function () {
                     value: 'var(--vkui--colors_scheme, light)',
                 },
                 someNewRandomToken: {
-                    name: '--vkui--some_ne_wrandom_token',
+                    name: '--vkui--some_new_random_token',
                     originalValue: '3',
-                    value: 'var(--vkui--some_ne_wrandom_token, 3)',
+                    value: 'var(--vkui--some_new_random_token, 3)',
                 },
                 themeType: 'cssVarsWide',
             });
@@ -137,8 +137,8 @@ describe('expandTheme', function () {
                     value: 'var(--vkui--colors_scheme, light)',
                 },
                 someNewRandomToken: {
-                    name: '--vkui--some_ne_wrandom_token',
-                    value: 'var(--vkui--some_ne_wrandom_token, 3)',
+                    name: '--vkui--some_new_random_token',
+                    value: 'var(--vkui--some_new_random_token, 3)',
                 },
                 themeType: 'cssVars',
             });

package/build/helpers/convertCamelToSnake.js

@@ -6,7 +6,7 @@ exports.convertCamelToSnake = void 0;
  */
 function convertCamelToSnake(str) {
     return str
-        .replace(/w*([A-Z])/g, function (letter) { return "_" + letter.toLowerCase(); })
+        .replace(/([A-Z])/g, function (letter) { return "_" + letter.toLowerCase(); })
         .replace(/^_/, '');
 }
 exports.convertCamelToSnake = convertCamelToSnake;

package/build/helpers/convertCamelToSnake.test.js

@@ -17,4 +17,7 @@ describe('convertCamelToSnake', function () {
     it('should convert many words string', function () {
         expect(convertCamelToSnake_1.convertCamelToSnake('helloWorldMyFriend')).toBe('hello_world_my_friend');
     });
+    it('should convert special case 1', function () {
+        expect(convertCamelToSnake_1.convertCamelToSnake('octaviusShadowLetterList')).toBe('octavius_shadow_letter_list');
+    });
 });

package/build/helpers/cssHelpers.d.ts

@@ -1 +1,12 @@
-export declare function getRGBA(color: string, opacity: number): string;
+import { ColorDescription, ColorDescriptionCallable, ColorDescriptionStatic, ColorWithStates } from '../../interfaces/general/colors';
+export declare function isColorWithStates(value: unknown): value is ColorWithStates;
+export declare function isColorDescriptionCallable(value: unknown): value is ColorDescriptionCallable<any>;
+export declare function isColorDescriptionStatic(value: unknown): value is ColorDescriptionStatic;
+/**
+ * @deprecated
+ * use toneOpacity
+ * TODO: remove
+ */
+export declare function getRGBA(color: ColorDescription, opacity: number): ColorDescription;
+export declare function toneOpacity(color: string, opacity: number): string;
+export declare function toneOpacity(color: ColorDescription, opacity: number): ColorDescription;

package/build/helpers/cssHelpers.js

@@ -1,13 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRGBA = void 0;
+exports.toneOpacity = exports.getRGBA = exports.isColorDescriptionStatic = exports.isColorDescriptionCallable = exports.isColorWithStates = void 0;
 var hexToRgb = function (hex) {
     var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     return result
         ? parseInt(result[1], 16) + ", " + parseInt(result[2], 16) + ", " + parseInt(result[3], 16)
         : '';
 };
+function isColorWithStates(value) {
+    return (value &&
+        typeof value === 'object' &&
+        typeof value['normal'] === 'string' &&
+        typeof value['hover'] === 'string' &&
+        typeof value['active'] === 'string');
+}
+exports.isColorWithStates = isColorWithStates;
+function isColorDescriptionCallable(value) {
+    return typeof value === 'function';
+}
+exports.isColorDescriptionCallable = isColorDescriptionCallable;
+function isColorDescriptionStatic(value) {
+    return typeof value === 'string' || isColorWithStates(value);
+}
+exports.isColorDescriptionStatic = isColorDescriptionStatic;
+/**
+ * @deprecated
+ * use toneOpacity
+ * TODO: remove
+ */
 function getRGBA(color, opacity) {
-    return "rgba(" + hexToRgb(color) + ", " + opacity + ")";
+    if (isColorDescriptionStatic(color)) {
+        if (isColorWithStates(color)) {
+            return "rgba(" + hexToRgb(color.normal) + ", " + opacity + ")";
+        }
+        return "rgba(" + hexToRgb(color) + ", " + opacity + ")";
+    }
+    return function (theme) {
+        return getRGBA(color(theme), opacity);
+    };
 }
 exports.getRGBA = getRGBA;
+function toneOpacity(color, opacity) {
+    return getRGBA(color, opacity);
+}
+exports.toneOpacity = toneOpacity;

package/build/helpers/cssHelpers.test.js

@@ -10,4 +10,16 @@ describe('cssHelpers', function () {
             expect(cssHelpers_1.getRGBA('#ffff00', 0.2)).toBe('rgba(255, 255, 0, 0.2)');
         });
     });
+    describe('toneOpacity', function () {
+        it('should work with string', function () {
+            expect(cssHelpers_1.toneOpacity('#f00000', 0.5)).toBe('rgba(240, 0, 0, 0.5)');
+        });
+        it('should work with ColorWithStates', function () {
+            expect(cssHelpers_1.toneOpacity({
+                normal: '#f00000',
+                hover: '#f00000',
+                active: '#f00000',
+            }, 0.5)).toBe('rgba(240, 0, 0, 0.5)');
+        });
+    });
 });

package/build/helpers/getAllButSizes.d.ts

@@ -0,0 +1 @@
+export declare function getAllButSizes(theme: Record<string, any>, themeNameBase?: unknown): any;

package/build/helpers/getAllButSizes.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAllButSizes = void 0;
+var regexSize = /^(size|font|x\d+)/i;
+function getAllButSizes(theme, themeNameBase) {
+    return Object.keys(theme).reduce(function (acc, key) {
+        var value = theme[key];
+        var lookupKey = typeof themeNameBase === 'string' && key.startsWith(themeNameBase)
+            ? key.slice(themeNameBase.length)
+            : key;
+        if (!regexSize.test(lookupKey)) {
+            acc[key] = value;
+        }
+        return acc;
+    }, {});
+}
+exports.getAllButSizes = getAllButSizes;

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

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

package/build/helpers/getAllButSizes.test.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var getAllButSizes_1 = require("./getAllButSizes");
+describe('getAllButSizes', function () {
+    it('should filter out tokens that start with "size", "font" or are a size helper', function () {
+        expect(getAllButSizes_1.getAllButSizes({
+            colorBackground: '#FFF',
+            sizePaddingBase: 20,
+            fontText: {
+                fontFamily: 'Comic Sans',
+            },
+            x10: 5,
+            xxxTokenXxx: '8',
+            octaviusColorBackground: '#ACA',
+            octaviusSizePaddingBase: 8,
+        }, 'octavius')).toEqual({
+            colorBackground: '#FFF',
+            xxxTokenXxx: '8',
+            octaviusColorBackground: '#ACA',
+        });
+    });
+});

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

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

package/build/helpers/getOnlyColors.test.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var getOnlyColors_1 = require("./getOnlyColors");
+describe('getOnlyColors', function () {
+    it('should filter out tokens that do not look like a color', function () {
+        expect(getOnlyColors_1.getOnlyColors({
+            colorBackground: {
+                normal: '#FFF',
+            },
+            sizePaddingBase: 20,
+        })).toEqual({
+            colorBackground: {
+                normal: '#FFF',
+            },
+        });
+    });
+});

package/build/themeProcessors/expandColors/expandColors.d.ts

@@ -1,9 +1,12 @@
 import { ColorsDescription, ColorsFinal } from '../../../interfaces/general';
-import { ColorDescription, ColorsDescriptionStruct } from '../../../interfaces/general/colors';
+import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../../interfaces/general/colors';
 export declare const colorStateMap: {
     readonly light: "#00103D";
     readonly dark: "#FFFFFF";
 };
+export declare function expandColor<T extends {
+    [key in keyof T]: ColorDescription;
+} = ColorsDescriptionStruct>(color: ColorDescription<T>, theme: Partial<ColorsDescription<T>>): ColorWithStates;
 /**
  * Процессор, который формирует из описания темы (ThemeDescription)
  * цвета со всеми состояниями active, hover и normal

package/build/themeProcessors/expandColors/expandColors.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getExpandedThemeColors = exports.colorStateMap = void 0;
+exports.getExpandedThemeColors = exports.expandColor = exports.colorStateMap = void 0;
+var cssHelpers_1 = require("../../helpers/cssHelpers");
 var mixColors_1 = require("./mixColors");
 exports.colorStateMap = {
     light: '#00103D',
@@ -17,6 +18,27 @@ var getColorWithStates = function (_a) {
         active: mixColors_1.mixColors(colorArg, colorState, toneValueActive),
     });
 };
+function expandCallableColor(color, theme) {
+    if (!cssHelpers_1.isColorDescriptionCallable(color)) {
+        return color;
+    }
+    // TODO: Придумать, как избавиться от any
+    return expandCallableColor(color(theme), theme);
+}
+function expandColor(color, theme) {
+    color = expandCallableColor(color, theme);
+    if (cssHelpers_1.isColorWithStates(color)) {
+        return color;
+    }
+    var colorState = exports.colorStateMap[theme.colorsScheme];
+    return getColorWithStates({
+        colorArg: color,
+        colorState: colorState,
+        toneValueHover: toneValueHover,
+        toneValueActive: toneValueActive,
+    });
+}
+exports.expandColor = expandColor;
 /**
  * Процессор, который формирует из описания темы (ThemeDescription)
  * цвета со всеми состояниями active, hover и normal
@@ -28,24 +50,12 @@ function getExpandedThemeColors(colorsDescription) {
     if (!colorsScheme || !colors) {
         return null;
     }
-    var colorState = exports.colorStateMap[colorsScheme];
-    var colorWithStates = function (colorArg) {
-        if (typeof colorArg === 'object' && 'active' in colorArg) {
-            return colorArg;
-        }
-        return getColorWithStates({
-            colorArg: colorArg,
-            colorState: colorState,
-            toneValueHover: toneValueHover,
-            toneValueActive: toneValueActive,
-        });
-    };
     var theme = {
         colorsScheme: colorsScheme,
     };
     Object.entries(colors).forEach(function (_a) {
         var key = _a[0], colorValue = _a[1];
-        theme[key] = colorWithStates(colorValue);
+        theme[key] = expandColor(colorValue, colorsDescription);
     });
     return theme;
 }

package/build/themeProcessors/expandColors/overlayColors.d.ts

@@ -0,0 +1,4 @@
+import { ColorDescription, ColorDescriptionCallable, ColorsDescriptionStruct } from '../../../interfaces/general/colors';
+export declare function overlayColors<T extends {
+    [key in keyof T]: ColorDescription;
+} = ColorsDescriptionStruct>(background: ColorDescription<T>, foreground: ColorDescription<T>, state?: 'normal' | 'hover' | 'active' | 'auto'): ColorDescriptionCallable<T>;

package/build/themeProcessors/expandColors/overlayColors.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.overlayColors = void 0;
+var color_1 = __importDefault(require("color"));
+var expandColors_1 = require("./expandColors");
+var mixColors_1 = require("./mixColors");
+function overlayColors(background, foreground, state) {
+    if (state === void 0) { state = 'normal'; }
+    return function (theme) {
+        var bgColor = expandColors_1.expandColor(background, theme);
+        var fgColor = expandColors_1.expandColor(foreground, theme);
+        var fgColorParsed = {
+            normal: color_1.default(fgColor.normal),
+            hover: color_1.default(fgColor.hover),
+            active: color_1.default(fgColor.active),
+        };
+        return {
+            normal: mixColors_1.mixColors(bgColor[state === 'auto' ? 'normal' : state], fgColorParsed.normal.rgb().string(), fgColorParsed.normal.alpha()),
+            hover: mixColors_1.mixColors(bgColor[state === 'auto' ? 'hover' : state], fgColorParsed.hover.rgb().string(), fgColorParsed.hover.alpha()),
+            active: mixColors_1.mixColors(bgColor[state === 'auto' ? 'active' : state], fgColorParsed.active.rgb().string(), fgColorParsed.active.alpha()),
+        };
+    };
+}
+exports.overlayColors = overlayColors;

package/build/themeProcessors/expandColors/overlayColors.test.d.ts

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

package/build/themeProcessors/expandColors/overlayColors.test.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var overlayColors_1 = require("./overlayColors");
+describe('overlayColors', function () {
+    test('overlay transparent on opaque in light color scheme', function () {
+        expect(overlayColors_1.overlayColors('rgb(0,0,0)', 'rgba(255,255,255,.5)')({ colorsScheme: 'light' })).toEqual({
+            normal: '#404040',
+            hover: '#4D4D4D',
+            active: '#5C5C5C',
+        });
+    });
+    test('overlay transparent on opaque in dark color scheme', function () {
+        expect(overlayColors_1.overlayColors('rgb(0,0,0)', 'rgba(255,255,255,.5)')({ colorsScheme: 'dark' })).toEqual({
+            normal: '#404040',
+            hover: '#4D4D4D',
+            active: '#5C5C5C',
+        });
+    });
+    test('overlay opaque on opaque', function () {
+        expect(overlayColors_1.overlayColors('rgb(0,0,0)', 'rgb(255,255,255)')({ colorsScheme: 'light' })).toEqual({
+            normal: '#FFFFFF',
+            hover: '#F5F5F7',
+            active: '#EBECEF',
+        });
+    });
+    test('overlay transparent custom states on opaque', function () {
+        expect(overlayColors_1.overlayColors('rgb(0,0,0)', {
+            normal: 'rgba(255,255,255,.5)',
+            hover: 'rgba(255,255,255,.5)',
+            active: 'rgba(255,255,255,.5)',
+        })({ colorsScheme: 'light' })).toEqual({
+            normal: '#404040',
+            hover: '#404040',
+            active: '#404040',
+        });
+    });
+});

package/build/themeProcessors/pixelifyValues/pixelifyValues.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pixelifyValues = void 0;
-var numericCSSProperties = new Set(['breakpoints', 'fontWeight']);
+var numericCSSProperties = /^(breakpoints$|fontWeight)/i;
 /**
  * Процессор, который превращает численные значения переменных в строковые
  * пример fontSize: 14 -> fontSize: "14px"
@@ -10,7 +10,7 @@ function pixelifyValues(sourceTheme) {
     var theme = JSON.parse(JSON.stringify(sourceTheme));
     Object.entries(theme).forEach(function (_a) {
         var key = _a[0], value = _a[1];
-        if (numericCSSProperties.has(key)) {
+        if (numericCSSProperties.test(key)) {
             return;
         }
         if (key === 'themeType') {

package/build/themeProcessors/pixelifyValues/pixelifyValues.test.js

@@ -77,5 +77,10 @@ describe('pixelifyValues', function () {
             };
             expect(pixelifyValues_1.pixelifyValues(theme)).toStrictEqual(pixelifyTheme);
         });
+        it('should correctly pixelify custom fontWeight tokens', function () {
+            expect(pixelifyValues_1.pixelifyValues({ fontWeightAccent1: 700 })).toEqual({
+                fontWeightAccent1: 700,
+            });
+        });
     });
 });

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

@@ -1,4 +1,5 @@
 import { Property } from 'csstype';
+import { ColorsDescription, ColorsScheme } from '..';
 /**
  * Интерфейс всех цветов на выходе
  */
@@ -7,7 +8,13 @@ export interface ColorWithStates {
     hover: Property.Color;
     active: Property.Color;
 }
-export declare type ColorDescription = Property.Color | ColorWithStates;
+export declare type ColorDescriptionStatic = Property.Color | ColorWithStates;
+export declare type ColorDescriptionCallable<T extends {
+    [key in keyof T]: ColorDescription;
+} = ColorsDescriptionStruct> = (theme: Partial<ColorsScheme & ColorsDescription<T>>) => ColorDescription;
+export declare type ColorDescription<T extends {
+    [key in keyof T]: ColorDescription;
+} = ColorsDescriptionStruct> = ColorDescriptionStatic | ColorDescriptionCallable<T>;
 /**
  * В описании цветов достаточно указать просто строку
  * (тогда состояния сгенерируются при сборке)
@@ -15,20 +22,22 @@ export declare type ColorDescription = Property.Color | ColorWithStates;
  */
 export interface ColorsDescriptionStruct {
     colorBackgroundAccent: ColorDescription;
+    colorBackgroundAccentThemed: ColorDescription;
+    colorBackgroundAccentAlternative: ColorDescription;
     colorIconAccent: ColorDescription;
     colorTextAccent: ColorDescription;
+    colorTextAccentThemed: ColorDescription;
     colorStrokeAccent: ColorDescription;
+    colorStrokeAccentThemed: ColorDescription;
+    colorStrokeContrast: ColorDescription;
     colorActionSheetText: ColorDescription;
     colorBackgroundContent: ColorDescription;
     colorBackgroundSecondary: ColorDescription;
+    colorBackgroundSecondaryAlpha: ColorDescription;
     colorBackgroundTertiary: ColorDescription;
     colorBackground: ColorDescription;
-    colorCounterAccentBackground: ColorDescription;
-    colorCounterAccentText: ColorDescription;
-    colorCounterProminentBackground: ColorDescription;
-    colorCounterProminentText: ColorDescription;
-    colorCounterMutedBackground: ColorDescription;
-    colorCounterMutedText: ColorDescription;
+    colorBackgroundContrast: ColorDescription;
+    colorBackgroundContrastSecondaryAlpha: ColorDescription;
     colorBackgroundWarning: ColorDescription;
     colorBackgroundNegative: ColorDescription;
     colorIconNegative: ColorDescription;
@@ -37,30 +46,31 @@ export interface ColorsDescriptionStruct {
     colorHeaderBackground: ColorDescription;
     colorPanelHeaderIcon: ColorDescription;
     colorIconPrimary: ColorDescription;
+    colorIconPrimaryInvariably: ColorDescription;
     colorIconMedium: ColorDescription;
     colorIconMediumAlpha: ColorDescription;
     colorIconSecondary: ColorDescription;
     colorIconSecondaryAlpha: ColorDescription;
     colorIconTertiary: ColorDescription;
     colorIconTertiaryAlpha: ColorDescription;
-    colorImageBorder: ColorDescription;
+    colorImageBorderAlpha: ColorDescription;
     colorWriteBarInputBackground: ColorDescription;
-    colorWriteBarInputBorder: ColorDescription;
-    colorTextLinkAlternate: ColorDescription;
+    colorWriteBarInputBorderAlpha: ColorDescription;
     colorTrackBackground: ColorDescription;
     colorTrackBuffer: ColorDescription;
     colorBackgroundModal: ColorDescription;
     colorImagePlaceholder: ColorDescription;
-    colorImagePlaceholderOpaque: ColorDescription;
+    colorImagePlaceholderAlpha: ColorDescription;
     colorSearchFieldBackground: ColorDescription;
-    colorFieldBorder: ColorDescription;
-    colorCheckboxBorder: ColorDescription;
+    colorFieldBorderAlpha: ColorDescription;
     colorSeparatorPrimaryAlpha: ColorDescription;
     colorSeparatorSecondary: ColorDescription;
     colorSeparatorPrimary: ColorDescription;
     colorTextLink: ColorDescription;
+    colorTextLinkThemed: ColorDescription;
     colorTextMuted: ColorDescription;
     colorTextPrimary: ColorDescription;
+    colorTextPrimaryInvariably: ColorDescription;
     colorTextSecondary: ColorDescription;
     colorTextSubhead: ColorDescription;
     colorTextTertiary: ColorDescription;
@@ -77,7 +87,9 @@ export interface ColorsDescriptionStruct {
     colorAccentSecondary: ColorDescription;
     colorTextLinkVisited: ColorDescription;
     colorTextContrast: ColorDescription;
+    colorTextContrastThemed: ColorDescription;
     colorIconContrast: ColorDescription;
+    colorIconContrastThemed: ColorDescription;
     colorLinkContrast: ColorDescription;
     colorBackgroundPositive: ColorDescription;
     colorIconPositive: ColorDescription;
@@ -86,6 +98,7 @@ export interface ColorsDescriptionStruct {
     colorAvatarOverlay: ColorDescription;
     colorOverlayPrimary: ColorDescription;
     colorTransparent: ColorDescription;
+    colorBackgroundNegativeTint: ColorDescription;
 }
 export declare type Colors = {
     [key in keyof ColorsDescriptionStruct]: ColorWithStates;