@vkontakte/vkui-tokens 4.33.0 → 4.33.1

package/README.md

@@ -21,10 +21,10 @@
     - [Подключение темы на страницу](#подключение-темы-на-страницу)
     - [Использование переменных в вёрстке](#использование-переменных-в-вёрстке)
   - [Использование базовой темы напрямую из пакета](#использование-базовой-темы-напрямую-из-пакета)
+  - [Создание новой темы для вашего проекта](docs/articles/new-theme/INDEX.md)
 - [Инструменты](#инструменты)
   - [Локальная сборка своих тем инструментами библиотеки](#локальная-сборка-своих-тем-инструментами-библиотеки)
     - [Наследование от существующей темы](#наследование-от-существующей-темы)
-    - [Создание собственной темы "с нуля"](#создание-собственной-темы-с-нуля)
 - [Roadmap](#roadmap)
 - [Полезные ссылки](#полезные-ссылки)
 - [Информация для внесения изменений](CONTRIBUTING.md)
@@ -217,46 +217,6 @@ const { theme, pixelifyTheme, cssVarsTheme } = expandAll(myNewAwesomeTheme);
 // которую можно вставить в DOM или сохранить в файл
 const cssString = compileStyles('css', pixelifyTheme);
 ```
-
-### Создание собственной темы "с нуля"
-
-В некоторых случаях нет необходимости наследоваться от одной из
-базовых тем. Библиотека позволяет сгенерировать свою тему из
-произвольного количества уникальных переменных.
-
-Пример:
-
-```typescript
-import type { Adaptive } from '@vkontakte/vkui-tokens/interfaces/general/tools';
-import { expandAll } from '@vkontakte/vkui-tokens/build/expandTheme';
-import { compileStyles } from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';
-
-interface MyNewAwesomeThemeDescription {
-	myNewAwesomeToken: Adaptive<number>;
-}
-
-const myNewAwesomeTheme: MyNewAwesomeThemeDescription = {
-	myNewAwesomeToken: {
-		regular: 20,
-		compact: 12,
-	},
-};
-
-// получаем разные типы тем на основе описания
-const { theme, pixelifyTheme, cssVarsTheme } = expandAll(myNewAwesomeTheme);
-
-// получаем CSS-строку со всеми переменными темы,
-// которую можно вставить в DOM или сохранить в файл
-// буквально тут содержится:
-/* 
-:root {
-	--vkui--my_new_awesome_token--regular: 20px;
-	--vkui--my_new_awesome_token--compact: 12px;
-}
- */
-const cssString = compileStyles('css', pixelifyTheme);
-```
-
 # Roadmap
 
 - [ ] Добавить более умную генерацию active, hover состояний цвета.

package/build/compilers/cssVars/declarations/compileBreakpointsCssVarsDeclaration.test.js

@@ -4,14 +4,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var globals_1 = require("@jest/globals");
 var common_tags_1 = require("common-tags");
 var compileBreakpointsCssVarsDeclaration_1 = require("./compileBreakpointsCssVarsDeclaration");
-describe('compileBreakpointsCssVarsDeclaration', function () {
-    it('should not work without breakpoints', function () {
+(0, globals_1.describe)('compileBreakpointsCssVarsDeclaration', function () {
+    (0, globals_1.it)('should not work without breakpoints', function () {
         var theme = {};
-        expect((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe(null);
+        (0, globals_1.expect)((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe(null);
     });
-    it('should work with breakpoints and empty vals', function () {
+    (0, globals_1.it)('should work with breakpoints and empty vals', function () {
         var theme = {
             breakpoints: {
                 touch: {
@@ -24,9 +25,9 @@ describe('compileBreakpointsCssVarsDeclaration', function () {
                 },
             },
         };
-        expect((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe(null);
+        (0, globals_1.expect)((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe(null);
     });
-    it('should work with non adaptive values', function () {
+    (0, globals_1.it)('should work with non adaptive values', function () {
         var theme = {
             breakpoints: {
                 touch: {
@@ -44,9 +45,9 @@ describe('compileBreakpointsCssVarsDeclaration', function () {
                 originalValue: '4px',
             },
         };
-        expect((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe(null);
+        (0, globals_1.expect)((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe(null);
     });
-    it('should work with flat adaptive values and several breakpotins', function () {
+    (0, globals_1.it)('should work with flat adaptive values and several breakpotins', function () {
         var theme = {
             breakpoints: {
                 touch: {
@@ -75,9 +76,9 @@ describe('compileBreakpointsCssVarsDeclaration', function () {
                 },
             },
         };
-        expect((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe((0, common_tags_1.stripIndent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\t:root {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t}\n\n\t\t\t@media (max-width: 767px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--compact);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-touch {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--compact);\n\t\t\t}\n\n\t\t\t@media (min-width: 768px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-desktop_s {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t}\n\t\t\t"], ["\n\t\t\t:root {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t}\n\n\t\t\t@media (max-width: 767px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--compact);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-touch {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--compact);\n\t\t\t}\n\n\t\t\t@media (min-width: 768px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-desktop_s {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t}\n\t\t\t"]))));
+        (0, globals_1.expect)((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe((0, common_tags_1.stripIndent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\t:root {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t}\n\n\t\t\t@media (max-width: 767px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--compact);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-touch {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--compact);\n\t\t\t}\n\n\t\t\t@media (min-width: 768px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-desktop_s {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t}\n\t\t\t"], ["\n\t\t\t:root {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t}\n\n\t\t\t@media (max-width: 767px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--compact);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-touch {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--compact);\n\t\t\t}\n\n\t\t\t@media (min-width: 768px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-desktop_s {\n\t\t\t\t--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);\n\t\t\t}\n\t\t\t"]))));
     });
-    it('should work with flat adaptive values and several breakpotins and without overriding', function () {
+    (0, globals_1.it)('should work with flat adaptive values and several breakpotins and without overriding', function () {
         var theme = {
             breakpoints: {
                 touch: {
@@ -101,9 +102,9 @@ describe('compileBreakpointsCssVarsDeclaration', function () {
                 },
             },
         };
-        expect((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe((0, common_tags_1.stripIndent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\t:root {\n\t\t\t\t--vkui--size_popup_base_padding: 20px;\n\t\t\t}\n\t\t\t"], ["\n\t\t\t:root {\n\t\t\t\t--vkui--size_popup_base_padding: 20px;\n\t\t\t}\n\t\t\t"]))));
+        (0, globals_1.expect)((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe((0, common_tags_1.stripIndent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\t:root {\n\t\t\t\t--vkui--size_popup_base_padding: 20px;\n\t\t\t}\n\t\t\t"], ["\n\t\t\t:root {\n\t\t\t\t--vkui--size_popup_base_padding: 20px;\n\t\t\t}\n\t\t\t"]))));
     });
-    it('should work with adaptive complex object', function () {
+    (0, globals_1.it)('should work with adaptive complex object', function () {
         var theme = {
             breakpoints: {
                 touch: {
@@ -147,7 +148,7 @@ describe('compileBreakpointsCssVarsDeclaration', function () {
                 },
             },
         };
-        expect((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe((0, common_tags_1.stripIndent)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\t:root {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t\t--vkui--font_h1--line_height: var(--vkui--font_h1--line_height--regular);\n\t\t\t}\n\n\t\t\t@media (max-width: 767px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-touch {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);\n\t\t\t}\n\n\t\t\t@media (min-width: 768px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-desktop_s {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t}\n\t\t\t"], ["\n\t\t\t:root {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t\t--vkui--font_h1--line_height: var(--vkui--font_h1--line_height--regular);\n\t\t\t}\n\n\t\t\t@media (max-width: 767px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-touch {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);\n\t\t\t}\n\n\t\t\t@media (min-width: 768px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-desktop_s {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t}\n\t\t\t"]))));
+        (0, globals_1.expect)((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme)).toBe((0, common_tags_1.stripIndent)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\t:root {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t\t--vkui--font_h1--line_height: var(--vkui--font_h1--line_height--regular);\n\t\t\t}\n\n\t\t\t@media (max-width: 767px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-touch {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);\n\t\t\t}\n\n\t\t\t@media (min-width: 768px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-desktop_s {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t}\n\t\t\t"], ["\n\t\t\t:root {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t\t--vkui--font_h1--line_height: var(--vkui--font_h1--line_height--regular);\n\t\t\t}\n\n\t\t\t@media (max-width: 767px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-touch {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--compact);\n\t\t\t}\n\n\t\t\t@media (min-width: 768px) {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-desktop_s {\n\t\t\t\t--vkui--font_h1--font_size: var(--vkui--font_h1--font_size--regular);\n\t\t\t}\n\t\t\t"]))));
     });
 });
 var templateObject_1, templateObject_2, templateObject_3;

package/build/compilers/cssVars/jsUtils/compileGetDeclarationString.test.js

@@ -4,14 +4,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var globals_1 = require("@jest/globals");
 var common_tags_1 = require("common-tags");
 var compileGetDeclarationString_1 = require("./compileGetDeclarationString");
-describe('compileGetDeclarationString', function () {
-    it('should work with empty', function () {
+(0, globals_1.describe)('compileGetDeclarationString', function () {
+    (0, globals_1.it)('should work with empty', function () {
         var theme = {};
-        expect((0, compileGetDeclarationString_1.compileGetDeclarationString)(theme)).toBe((0, common_tags_1.stripIndent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarString(): string {\n\t\t\t\treturn ``;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarObject(): Properties {\n\t\t\t\treturn {} as Properties;\n\t\t\t}\n\t\t\t"], ["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarString(): string {\n\t\t\t\treturn \\`\\`;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarObject(): Properties {\n\t\t\t\treturn {} as Properties;\n\t\t\t}\n\t\t\t"]))));
+        (0, globals_1.expect)((0, compileGetDeclarationString_1.compileGetDeclarationString)(theme)).toBe((0, common_tags_1.stripIndent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarString(): string {\n\t\t\t\treturn ``;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarObject(): Properties {\n\t\t\t\treturn {} as Properties;\n\t\t\t}\n\t\t\t"], ["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarString(): string {\n\t\t\t\treturn \\`\\`;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarObject(): Properties {\n\t\t\t\treturn {} as Properties;\n\t\t\t}\n\t\t\t"]))));
     });
-    it('should work with any values', function () {
+    (0, globals_1.it)('should work with any values', function () {
         var theme = {
             x1: {
                 name: '--paradigm--x1',
@@ -52,9 +53,9 @@ describe('compileGetDeclarationString', function () {
                 },
             },
         };
-        expect((0, compileGetDeclarationString_1.compileGetDeclarationString)(theme)).toBe((0, common_tags_1.stripIndent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarString(): string {\n\t\t\t\treturn `--paradigm--x1: 4px;--vkui--size_popup_base_padding--compact: 16px;--vkui--size_popup_base_padding--regular: 20px;--vkui--color_text_accent: white;--vkui--color_text_accent--hover: black;--vkui--color_text_accent--active: red;`;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarObject(): Properties {\n\t\t\t\treturn {\"--paradigm--x1\":\"4px\",\"--vkui--size_popup_base_padding--compact\":\"16px\",\"--vkui--size_popup_base_padding--regular\":\"20px\",\"--vkui--color_text_accent\":\"white\",\"--vkui--color_text_accent--hover\":\"black\",\"--vkui--color_text_accent--active\":\"red\"} as Properties;\n\t\t\t}\n\t\t\t"], ["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarString(): string {\n\t\t\t\treturn \\`--paradigm--x1: 4px;--vkui--size_popup_base_padding--compact: 16px;--vkui--size_popup_base_padding--regular: 20px;--vkui--color_text_accent: white;--vkui--color_text_accent--hover: black;--vkui--color_text_accent--active: red;\\`;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarObject(): Properties {\n\t\t\t\treturn {\"--paradigm--x1\":\"4px\",\"--vkui--size_popup_base_padding--compact\":\"16px\",\"--vkui--size_popup_base_padding--regular\":\"20px\",\"--vkui--color_text_accent\":\"white\",\"--vkui--color_text_accent--hover\":\"black\",\"--vkui--color_text_accent--active\":\"red\"} as Properties;\n\t\t\t}\n\t\t\t"]))));
+        (0, globals_1.expect)((0, compileGetDeclarationString_1.compileGetDeclarationString)(theme)).toBe((0, common_tags_1.stripIndent)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarString(): string {\n\t\t\t\treturn `--paradigm--x1: 4px;--vkui--size_popup_base_padding--compact: 16px;--vkui--size_popup_base_padding--regular: 20px;--vkui--color_text_accent: white;--vkui--color_text_accent--hover: black;--vkui--color_text_accent--active: red;`;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarObject(): Properties {\n\t\t\t\treturn {\"--paradigm--x1\":\"4px\",\"--vkui--size_popup_base_padding--compact\":\"16px\",\"--vkui--size_popup_base_padding--regular\":\"20px\",\"--vkui--color_text_accent\":\"white\",\"--vkui--color_text_accent--hover\":\"black\",\"--vkui--color_text_accent--active\":\"red\"} as Properties;\n\t\t\t}\n\t\t\t"], ["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarString(): string {\n\t\t\t\treturn \\`--paradigm--x1: 4px;--vkui--size_popup_base_padding--compact: 16px;--vkui--size_popup_base_padding--regular: 20px;--vkui--color_text_accent: white;--vkui--color_text_accent--hover: black;--vkui--color_text_accent--active: red;\\`;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarObject(): Properties {\n\t\t\t\treturn {\"--paradigm--x1\":\"4px\",\"--vkui--size_popup_base_padding--compact\":\"16px\",\"--vkui--size_popup_base_padding--regular\":\"20px\",\"--vkui--color_text_accent\":\"white\",\"--vkui--color_text_accent--hover\":\"black\",\"--vkui--color_text_accent--active\":\"red\"} as Properties;\n\t\t\t}\n\t\t\t"]))));
     });
-    it('should work onlyColorsMode', function () {
+    (0, globals_1.it)('should work onlyColorsMode', function () {
         var theme = {
             x1: {
                 name: '--paradigm--x1',
@@ -95,7 +96,7 @@ describe('compileGetDeclarationString', function () {
                 },
             },
         };
-        expect((0, compileGetDeclarationString_1.compileGetDeclarationString)(theme, 'onlyColors')).toBe((0, common_tags_1.stripIndent)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarColorsString(): string {\n\t\t\t\treturn `--vkui--color_text_accent: white;--vkui--color_text_accent--hover: black;--vkui--color_text_accent--active: red;`;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarColorsObject(): Properties {\n\t\t\t\treturn {\"--vkui--color_text_accent\":\"white\",\"--vkui--color_text_accent--hover\":\"black\",\"--vkui--color_text_accent--active\":\"red\"} as Properties;\n\t\t\t}\n\t\t\t"], ["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarColorsString(): string {\n\t\t\t\treturn \\`--vkui--color_text_accent: white;--vkui--color_text_accent--hover: black;--vkui--color_text_accent--active: red;\\`;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarColorsObject(): Properties {\n\t\t\t\treturn {\"--vkui--color_text_accent\":\"white\",\"--vkui--color_text_accent--hover\":\"black\",\"--vkui--color_text_accent--active\":\"red\"} as Properties;\n\t\t\t}\n\t\t\t"]))));
+        (0, globals_1.expect)((0, compileGetDeclarationString_1.compileGetDeclarationString)(theme, 'onlyColors')).toBe((0, common_tags_1.stripIndent)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarColorsString(): string {\n\t\t\t\treturn `--vkui--color_text_accent: white;--vkui--color_text_accent--hover: black;--vkui--color_text_accent--active: red;`;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarColorsObject(): Properties {\n\t\t\t\treturn {\"--vkui--color_text_accent\":\"white\",\"--vkui--color_text_accent--hover\":\"black\",\"--vkui--color_text_accent--active\":\"red\"} as Properties;\n\t\t\t}\n\t\t\t"], ["\n\t\t\timport {Properties} from 'csstype';\n\n\t\t\texport function getDeclarationVarColorsString(): string {\n\t\t\t\treturn \\`--vkui--color_text_accent: white;--vkui--color_text_accent--hover: black;--vkui--color_text_accent--active: red;\\`;\n\t\t\t}\n\n\t\t\texport function getDeclarationVarColorsObject(): Properties {\n\t\t\t\treturn {\"--vkui--color_text_accent\":\"white\",\"--vkui--color_text_accent--hover\":\"black\",\"--vkui--color_text_accent--active\":\"red\"} as Properties;\n\t\t\t}\n\t\t\t"]))));
     });
 });
 var templateObject_1, templateObject_2, templateObject_3;

package/build/compilers/docs/compileDocsJSON.test.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var globals_1 = require("@jest/globals");
 var compileDocsJSON_1 = require("./compileDocsJSON");
-describe('compileDocsJSON', function () {
-    it('should correct compile documentation with reexported interface', function () {
+(0, globals_1.describe)('compileDocsJSON', function () {
+    (0, globals_1.it)('should correct compile documentation with reexported interface', function () {
         var docs = (0, compileDocsJSON_1.getTypeDocs)('src/build/compilers/docs/__test__/testRecursiveReexport.ts', 'BaseTheme');
-        expect(docs).toEqual({
+        (0, globals_1.expect)(docs).toEqual({
             importedBaseProp: {
                 desc: [
                     {
@@ -16,9 +17,9 @@ describe('compileDocsJSON', function () {
             },
         });
     });
-    it('should correct compile documentation with jsdoc link', function () {
+    (0, globals_1.it)('should correct compile documentation with jsdoc link', function () {
         var docs = (0, compileDocsJSON_1.getTypeDocs)('src/build/compilers/docs/__test__/testLinks.ts', 'BaseTheme');
-        expect(docs).toEqual({
+        (0, globals_1.expect)(docs).toEqual({
             importedBaseProp: {
                 desc: [
                     {
@@ -44,9 +45,9 @@ describe('compileDocsJSON', function () {
             },
         });
     });
-    it('should correct compile documentation with imports', function () {
+    (0, globals_1.it)('should correct compile documentation with imports', function () {
         var docs = (0, compileDocsJSON_1.getTypeDocs)('src/build/compilers/docs/__test__/testTheme.ts', 'ThemeTest');
-        expect(docs).toEqual({
+        (0, globals_1.expect)(docs).toEqual({
             prop: {
                 desc: [],
                 tags: ['empty description'],

package/build/compilers/json/compileJSON.test.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var globals_1 = require("@jest/globals");
 var compileJSON_1 = require("./compileJSON");
-describe('compileJSON', function () {
-    it('should correct stringify', function () {
+(0, globals_1.describe)('compileJSON', function () {
+    (0, globals_1.it)('should correct stringify', function () {
         var testData = {
             colorState: {
                 normal: '#00103D',
             },
             toneValueHover: 0.04,
         };
-        expect((0, compileJSON_1.compileJSON)(testData)).toBe('{\n\t"colorState": {\n\t\t"normal": "#00103D"\n\t},\n\t"toneValueHover": 0.04\n}');
+        (0, globals_1.expect)((0, compileJSON_1.compileJSON)(testData)).toBe('{\n\t"colorState": {\n\t\t"normal": "#00103D"\n\t},\n\t"toneValueHover": 0.04\n}');
     });
 });

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

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var globals_1 = require("@jest/globals");
 var compileStructJSON_1 = require("./compileStructJSON");
-describe('compileJSON', function () {
-    it('should correct stringify', function () {
+(0, globals_1.describe)('compileJSON', function () {
+    (0, globals_1.it)('should correct stringify', function () {
         var testData = {
             colorA: '#fff',
             colorsScheme: 'scheme',
             randomToken: 123,
         };
-        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}");
     });
 });

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

@@ -4,16 +4,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var globals_1 = require("@jest/globals");
 var common_tags_1 = require("common-tags");
 var compileStyles_1 = require("./compileStyles");
 var tokenProcessors_1 = require("./helpers/tokenProcessors");
 var formats = Object.values(tokenProcessors_1.EStyleTypes);
 function runTest(format, testData) {
     var compiled = (0, compileStyles_1.compileStyles)(format, testData.descriptionTheme, testData.mode, testData.descriptionThemeBase);
-    expect(compiled).toBe(testData.result[format]);
+    (0, globals_1.expect)(compiled).toBe(testData.result[format]);
 }
-describe('compileStyles', function () {
-    test.each(formats)('%s: should compile colors', function (format) {
+(0, globals_1.describe)('compileStyles', function () {
+    globals_1.test.each(formats)('%s: should compile colors', function (format) {
         runTest(format, {
             descriptionTheme: {
                 themeName: 'testTheme',
@@ -33,7 +34,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: should compile flat class variables', function (format) {
+    globals_1.test.each(formats)('%s: should compile flat class variables', function (format) {
         runTest(format, {
             descriptionTheme: {
                 themeName: 'testTheme',
@@ -52,7 +53,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: should compile adaptive class variables', function (f) {
+    globals_1.test.each(formats)('%s: should compile adaptive class variables', function (f) {
         runTest(f, {
             descriptionTheme: {
                 themeName: 'testTheme',
@@ -79,7 +80,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: should compile adaptive flat variables', function (f) {
+    globals_1.test.each(formats)('%s: should compile adaptive flat variables', function (f) {
         runTest(f, {
             descriptionTheme: {
                 themeName: 'testTheme',
@@ -100,7 +101,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: should compile flat variables', function (f) {
+    globals_1.test.each(formats)('%s: should compile flat variables', function (f) {
         runTest(f, {
             descriptionTheme: {
                 themeName: 'testTheme',
@@ -116,7 +117,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: should compile media queries', function (f) {
+    globals_1.test.each(formats)('%s: should compile media queries', function (f) {
         runTest(f, {
             descriptionTheme: {
                 themeName: 'testTheme',
@@ -133,7 +134,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: should compile adaptive class variables with onlyAdaptiveGroups', function (f) {
+    globals_1.test.each(formats)('%s: should compile adaptive class variables with onlyAdaptiveGroups', function (f) {
         runTest(f, {
             descriptionTheme: {
                 themeName: 'testTheme',
@@ -161,7 +162,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: should compile adaptive class variables with mode=withAdaptiveGroups', function (f) {
+    globals_1.test.each(formats)('%s: should compile adaptive class variables with mode=withAdaptiveGroups', function (f) {
         runTest(f, {
             mode: 'withAdaptiveGroups',
             descriptionTheme: {
@@ -189,7 +190,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: should compile onlyColors', function (f) {
+    globals_1.test.each(formats)('%s: should compile onlyColors', function (f) {
         runTest(f, {
             mode: 'onlyColors',
             descriptionTheme: {
@@ -213,7 +214,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: should compile noSizes', function (f) {
+    globals_1.test.each(formats)('%s: should compile noSizes', function (f) {
         runTest(f, {
             mode: 'noSizes',
             descriptionTheme: {
@@ -237,7 +238,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: should compile noColors', function (f) {
+    globals_1.test.each(formats)('%s: should compile noColors', function (f) {
         runTest(f, {
             mode: 'noColors',
             descriptionTheme: {
@@ -261,7 +262,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: customized selector in onlyVariablesLocal', function (f) {
+    globals_1.test.each(formats)('%s: customized selector in onlyVariablesLocal', function (f) {
         runTest(f, {
             mode: 'onlyVariablesLocal',
             descriptionTheme: {
@@ -283,7 +284,7 @@ describe('compileStyles', function () {
             },
         });
     });
-    test.each(formats)('%s: onlyVariablesLocalIncremental', function (f) {
+    globals_1.test.each(formats)('%s: onlyVariablesLocalIncremental', function (f) {
         runTest(f, {
             mode: 'onlyVariablesLocalIncremental',
             descriptionTheme: {

package/build/compilers/ts/compileTypeScript.test.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var globals_1 = require("@jest/globals");
 var compileTypeScript_1 = require("./compileTypeScript");
-describe('compileTypeScript', function () {
+(0, globals_1.describe)('compileTypeScript', function () {
     var testData = {
         themeName: 'base',
     };
-    it('should work', function () {
-        expect((0, compileTypeScript_1.compileTypeScript)(testData)).toBe("import { $$InterfaceName$$ } from '$$InterfaceURL$$';\n\nconst theme: $$InterfaceName$$ = {\n\t\"themeName\": \"base\"\n};\n\nexport default theme;\nexport { $$InterfaceName$$ };\n");
+    (0, globals_1.it)('should work', function () {
+        (0, globals_1.expect)((0, compileTypeScript_1.compileTypeScript)(testData)).toBe("import { $$InterfaceName$$ } from '$$InterfaceURL$$';\n\nconst theme: $$InterfaceName$$ = {\n\t\"themeName\": \"base\"\n};\n\nexport default theme;\nexport { $$InterfaceName$$ };\n");
     });
 });

package/build/expandTheme.test.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var globals_1 = require("@jest/globals");
 var expandTheme_1 = require("./expandTheme");
-describe('expandTheme', function () {
-    describe('expandRootTheme', function () {
-        it('should return specific props', function () {
+(0, globals_1.describe)('expandTheme', function () {
+    (0, globals_1.describe)('expandRootTheme', function () {
+        (0, globals_1.it)('should return specific props', function () {
             var result = (0, expandTheme_1.expandRootTheme)({
                 colorsScheme: 'light',
                 colors: {
@@ -11,7 +12,7 @@ describe('expandTheme', function () {
                 },
                 someNewRandomToken: '3',
             });
-            expect(result).toStrictEqual({
+            (0, globals_1.expect)(result).toStrictEqual({
                 colorOverlayPrimary: {
                     active: 'rgba(0, 0, 0, 0.56)',
                     hover: 'rgba(0, 0, 0, 0.52)',
@@ -22,14 +23,14 @@ describe('expandTheme', function () {
                 themeType: 'root',
             });
         });
-        it('should work without colors', function () {
+        (0, globals_1.it)('should work without colors', function () {
             var result = (0, expandTheme_1.expandRootTheme)({
                 someNewRandomToken: '3',
                 sizeArrow: {
                     regular: 3,
                 },
             });
-            expect(result).toStrictEqual({
+            (0, globals_1.expect)(result).toStrictEqual({
                 sizeArrow: {
                     regular: 3,
                 },
@@ -38,8 +39,8 @@ describe('expandTheme', function () {
             });
         });
     });
-    describe('expandAll', function () {
-        it('should add specific prop theme', function () {
+    (0, globals_1.describe)('expandAll', function () {
+        (0, globals_1.it)('should add specific prop theme', function () {
             var result = (0, expandTheme_1.expandAll)({
                 colorsScheme: 'light',
                 colors: {
@@ -47,10 +48,10 @@ describe('expandTheme', function () {
                 },
                 someNewRandomToken: '3',
             });
-            expect(result.theme).not.toBeUndefined();
-            expect(result.theme.themeType).toBe('root');
+            (0, globals_1.expect)(result.theme).not.toBeUndefined();
+            (0, globals_1.expect)(result.theme.themeType).toBe('root');
         });
-        it('should add specific prop pixelifyTheme', function () {
+        (0, globals_1.it)('should add specific prop pixelifyTheme', function () {
             var result = (0, expandTheme_1.expandAll)({
                 colorsScheme: 'light',
                 colors: {
@@ -58,19 +59,19 @@ describe('expandTheme', function () {
                 },
                 someNewRandomToken: '3',
             });
-            expect(result.pixelifyTheme).not.toBeUndefined();
-            expect(result.pixelifyTheme.themeType).toBe('pixelify');
+            (0, globals_1.expect)(result.pixelifyTheme).not.toBeUndefined();
+            (0, globals_1.expect)(result.pixelifyTheme.themeType).toBe('pixelify');
         });
-        it('should pixelify in pixelifyTheme', function () {
+        (0, globals_1.it)('should pixelify in pixelifyTheme', function () {
             var result = (0, expandTheme_1.expandAll)({
                 someNewRandomToken: '3',
                 sizeArrow: {
                     regular: 3,
                 },
             });
-            expect(result.pixelifyTheme.sizeArrow.regular).toBe('3px');
+            (0, globals_1.expect)(result.pixelifyTheme.sizeArrow.regular).toBe('3px');
         });
-        it('should add specific prop cssVarsWide', function () {
+        (0, globals_1.it)('should add specific prop cssVarsWide', function () {
             var result = (0, expandTheme_1.expandAll)({
                 colorsScheme: 'light',
                 colors: {
@@ -78,7 +79,7 @@ describe('expandTheme', function () {
                 },
                 someNewRandomToken: '3',
             });
-            expect(result.cssVarsThemeWide).toStrictEqual({
+            (0, globals_1.expect)(result.cssVarsThemeWide).toStrictEqual({
                 colorOverlayPrimary: {
                     active: {
                         name: '--vkui--color_overlay_primary--active',
@@ -109,7 +110,7 @@ describe('expandTheme', function () {
                 themeType: 'cssVarsWide',
             });
         });
-        it('should add specific prop cssVars', function () {
+        (0, globals_1.it)('should add specific prop cssVars', function () {
             var result = (0, expandTheme_1.expandAll)({
                 colorsScheme: 'light',
                 colors: {
@@ -117,7 +118,7 @@ describe('expandTheme', function () {
                 },
                 someNewRandomToken: '3',
             });
-            expect(result.cssVarsTheme).toStrictEqual({
+            (0, globals_1.expect)(result.cssVarsTheme).toStrictEqual({
                 colorOverlayPrimary: {
                     active: {
                         name: '--vkui--color_overlay_primary--active',

package/build/helpers/capitalize.test.js

@@ -2,17 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var globals_1 = require("@jest/globals");
 var capitalize_1 = require("./capitalize");
-describe('capitalize', function () {
-    it('should work without letters', function () {
+(0, globals_1.describe)('capitalize', function () {
+    (0, globals_1.it)('should work without letters', function () {
         (0, globals_1.expect)((0, capitalize_1.capitalize)('')).toBe('');
     });
-    it('should work with 1 letter', function () {
+    (0, globals_1.it)('should work with 1 letter', function () {
         (0, globals_1.expect)((0, capitalize_1.capitalize)('a')).toBe('A');
     });
-    it('should work with some letters', function () {
+    (0, globals_1.it)('should work with some letters', function () {
         (0, globals_1.expect)((0, capitalize_1.capitalize)('aaaaa')).toBe('Aaaaa');
     });
-    it('should ignore another letters', function () {
+    (0, globals_1.it)('should ignore another letters', function () {
         (0, globals_1.expect)((0, capitalize_1.capitalize)('1ds')).toBe('1ds');
     });
 });

package/build/helpers/convertCamelToSnake.test.js

@@ -1,23 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var globals_1 = require("@jest/globals");
 var convertCamelToSnake_1 = require("./convertCamelToSnake");
-describe('convertCamelToSnake', function () {
-    it('should correctly work with empty string', function () {
-        expect((0, convertCamelToSnake_1.convertCamelToSnake)('')).toBe('');
+(0, globals_1.describe)('convertCamelToSnake', function () {
+    (0, globals_1.it)('should correctly work with empty string', function () {
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('')).toBe('');
     });
-    it('should work with word lower letters', function () {
-        expect((0, convertCamelToSnake_1.convertCamelToSnake)('hello')).toBe('hello');
+    (0, globals_1.it)('should work with word lower letters', function () {
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('hello')).toBe('hello');
     });
-    it('should work with Capitalize world', function () {
-        expect((0, convertCamelToSnake_1.convertCamelToSnake)('Hello')).toBe('hello');
+    (0, globals_1.it)('should work with Capitalize world', function () {
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('Hello')).toBe('hello');
     });
-    it('should convert two words string', function () {
-        expect((0, convertCamelToSnake_1.convertCamelToSnake)('desktopS')).toBe('desktop_s');
+    (0, globals_1.it)('should convert two words string', function () {
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('desktopS')).toBe('desktop_s');
     });
-    it('should convert many words string', function () {
-        expect((0, convertCamelToSnake_1.convertCamelToSnake)('helloWorldMyFriend')).toBe('hello_world_my_friend');
+    (0, globals_1.it)('should convert many words string', function () {
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('helloWorldMyFriend')).toBe('hello_world_my_friend');
     });
-    it('should convert special case 1', function () {
-        expect((0, convertCamelToSnake_1.convertCamelToSnake)('octaviusShadowLetterList')).toBe('octavius_shadow_letter_list');
+    (0, globals_1.it)('should convert special case 1', function () {
+        (0, globals_1.expect)((0, convertCamelToSnake_1.convertCamelToSnake)('octaviusShadowLetterList')).toBe('octavius_shadow_letter_list');
     });
 });

package/build/helpers/cssHelpers.test.js

@@ -1,21 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var globals_1 = require("@jest/globals");
 var cssHelpers_1 = require("./cssHelpers");
-describe('cssHelpers', function () {
-    describe('getRGBA', function () {
-        it('should work with red', function () {
-            expect((0, cssHelpers_1.getRGBA)('#f00000', 0.5)).toBe('rgba(240, 0, 0, 0.5)');
+(0, globals_1.describe)('cssHelpers', function () {
+    (0, globals_1.describe)('getRGBA', function () {
+        (0, globals_1.it)('should work with red', function () {
+            (0, globals_1.expect)((0, cssHelpers_1.getRGBA)('#f00000', 0.5)).toBe('rgba(240, 0, 0, 0.5)');
         });
-        it('should work with yellow', function () {
-            expect((0, cssHelpers_1.getRGBA)('#ffff00', 0.2)).toBe('rgba(255, 255, 0, 0.2)');
+        (0, globals_1.it)('should work with yellow', function () {
+            (0, globals_1.expect)((0, cssHelpers_1.getRGBA)('#ffff00', 0.2)).toBe('rgba(255, 255, 0, 0.2)');
         });
     });
-    describe('toneOpacity', function () {
-        it('should work with string', function () {
-            expect((0, cssHelpers_1.toneOpacity)('#f00000', 0.5)).toBe('rgba(240, 0, 0, 0.5)');
+    (0, globals_1.describe)('toneOpacity', function () {
+        (0, globals_1.it)('should work with string', function () {
+            (0, globals_1.expect)((0, cssHelpers_1.toneOpacity)('#f00000', 0.5)).toBe('rgba(240, 0, 0, 0.5)');
         });
-        it('should work with ColorWithStates', function () {
-            expect((0, cssHelpers_1.toneOpacity)({
+        (0, globals_1.it)('should work with ColorWithStates', function () {
+            (0, globals_1.expect)((0, cssHelpers_1.toneOpacity)({
                 normal: '#f00000',
                 hover: '#f00000',
                 active: '#f00000',