@vkontakte/vkui-tokens 4.0.0-rc.8 → 4.1.0

package/README.md

@@ -1,42 +1,86 @@
 <img src="assets/vkui_logo.png" alt="vkui logo" height="52"/>
 <img src="assets/logo.svg" alt="vkui logo" height="52"/>
 
+[![Tests](https://github.com/VKCOM/vkui-tokens/actions/workflows/test.yml/badge.svg?branch=master)](https://github.com/VKCOM/vkui-tokens/actions/workflows/test.yml)
+[![Npm](https://img.shields.io/npm/v/@vkontakte/vkui-tokens)](https://www.npmjs.com/package/@vkontakte/vkui-tokens)
+[![GitHub Repo stars](https://img.shields.io/github/stars/VKCOM/vkui-tokens?label=GitHub%20Repo%20Stars&style=social)](https://github.com/VKCOM/vkui-tokens)
+
+Этот репозиторий содержит токены единой дизайн-системы VKUI и
+их значения для тем оформления различных проектов.
+
+Темы собираются в следующие форматы: `css`, `scss`, `less`, `pcss`, `styl`, `js`, `json`.
+
+Для описания интерфейсов тем и значений переменных используется TypeScript.
+
+# Содержание
+
+* [Использование](#использование)
+  * [Использование CSS-переменных темы напрямую из пакета](#использование-css-переменных-темы-напрямую-из-пакета)
+    * [Подключение темы на страницу](#подключение-темы-на-страницу)
+    * [Использование переменных в вёрстке](#использование-переменных-в-вёрстке)
+  * [Использование базовой темы напрямую из пакета](#использование-базовой-темы-напрямую-из-пакета)
+* [Инструменты](#инструменты)
+  * [Локальная сборка своих тем инструментами библиотеки](#локальная-сборка-своих-тем-инструментами-библиотеки)
+    * [Наследование от существующей темы](#наследование-от-существующей-темы)
+    * [Создание собственной темы "с нуля"](#создание-собственной-темы-с-нуля)
+* [Roadmap](#roadmap)
+* [Полезные ссылки](#полезные-ссылки)
+* [Информация для внесения изменений](CONTRIBUTING.md)
+* [Changelog (архивная версия)](CHANGELOG.OLD.md)
+
+Актуальный changelog находится на странице
+[релизов в GitHub](https://github.com/VKCOM/vkui-tokens/releases)!
+
 # Использование
 
-1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:
+Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:
 ```bash
 npm i --save @vkontakte/vkui-tokens@latest
 ```
-## Используем css variables темы напрямую из пакета
-2. В любом css (или процессоре) импортируем css файл с объявлением переменных:
+## Использование CSS-переменных темы напрямую из пакета
+### Подключение темы на страницу
+
+В любом CSS-файле подключаем файл темы со значениями переменных:
 ```css
 @import "@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css";
 ```
 
-3. далее используем эти переменные
-* напрямую в css (процессорах)
+### Использование переменных в вёрстке
+#### Использование в CSS
 ```postcss
 .myAwesomeClass:hover {
 	background-color: var(--vkui--color_background--hover);
 }
 ```
-* или через объект в js(ts)
+
+#### Использование CSS-переменных через объект в JavaScript (TypeScript)
 ```typescript
 import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';
 
+// Собствено имя CSS-переменной (название токена)
 console.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;
+// Сниппет для использования CSS-переменной
 console.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)
 
-// динамически (с учётом возможных переопределений)
-// узнаём чему равно значение переменной у myElement:
+// Динамически (с учётом возможных переопределений)
+// узнаём, чему равно значение переменной внутри myElement:
 getComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)
 ```
-* для того, чтобы принудительно включать тот или иной вид темы у конкретного поддерева элементов, пользуемся классами `.vkui--force-${auto | regular | compact | large | largeX ...}`. Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы адаптивных переменных и спец. классов. (Также можно просто использовать переменную конкретного брейкпоинта (ex. --vkui--size_field_height--**_compact_**), они все также попадают в `:root`)
 
+#### Принудительное использование токенов определённого размера
+Чтобы принудительно включить тот или иной вид темы у конкретного 
+поддерева элементов, нужно воспользоваться классами 
+`.vkui--force-${auto | regular | compact | large | largeX ...}`.
+Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы 
+адаптивных переменных и спец. классов.
 
-## Используем root темы напрямую из пакета
+Также можно просто использовать переменную конкретного брейкпоинта 
+(ex. --vkui--size_field_height--**_compact_**), они все тоже
+попадают в `:root`)
+
+## Использование базовой темы напрямую из пакета
 ### js/ts/json
-2. Импортируем необходимую тему в файле и используем:
+Импортируем необходимую тему в файле и используем:
 ```ts
 import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
 
@@ -44,7 +88,7 @@ import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
 ```
 
 ### Используем в scss/styl/less root темы из пакета
-2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)
+Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)
 ```scss
 @import "~@vkontakte/vkui-tokens/themes/vkBase/index";
 
@@ -57,18 +101,17 @@ import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
 }
 ```
 
-
 ###  Используем pcss формат темы из пакета
 
-2. Заходим в файл, где хотим использовать тему, и импортируем её:
+1Заходим в файл, где хотим использовать тему, и импортируем её:
 
         @import "@vkontakte/vkui-tokens/themes/vkBase";
 
-3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:
+2. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:
 
         width: var(--size-content-block-width);
 
-4. Просто так ничего не заработает, нужно поставить postcss:
+3. Просто так ничего не заработает, нужно поставить postcss:
 
         npm i --save-dev postcss
 
@@ -76,35 +119,35 @@ import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
 
         npm i --save-dev postcss-cli
 
-5. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:
+4. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:
 
      ```javascript
         const postcssPresetEnv = require('postcss-preset-env');
 
          module.exports = {
-         	plugins: [
-         		require('postcss-import'),
-         		require('precss'),
-         		require('postcss-css-variables'),
-         		require('postcss-custom-media'),
-         		require('postcss-media-minmax'),
-         		require('postcss-extend-rule'),
-         		postcssPresetEnv({
-         			stage: 0,
-         		}),
-         		require('postcss-color-mix'),
-         		require('cssnano')
-         	],
+             plugins: [
+                 require('postcss-import'),
+                 require('precss'),
+                 require('postcss-css-variables'),
+                 require('postcss-custom-media'),
+                 require('postcss-media-minmax'),
+                 require('postcss-extend-rule'),
+                 postcssPresetEnv({
+                     stage: 0,
+                 }),
+                 require('postcss-color-mix'),
+                 require('cssnano')
+             ],
          };
      ```
    Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).
    Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.
 
-6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:
+5. Устанавливаем все необходимые плагины, которые написали в конфиге, например:
 
         npm i --save-dev postcss-import
 
-7. Настраиваем сборку postcss.
+6. Настраиваем сборку postcss.
 
    Сборка производится командой postcss через командную строку с необходимым параметрами.
    Про них подробнее тут https://github.com/postcss/postcss-cli
@@ -115,11 +158,21 @@ import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
 
    Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.
 
+# Инструменты
 ## Локальная сборка своих тем инструментами библиотеки
 
-### Наследуемся от базовой темы
-2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.
-   Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:
+Библиотека предоставляет интерфейсы и темы, от которых можно 
+наследоваться.
+
+Помимо этого, библиотека предоставляет набор функций, которые позволяют
+собрать собственную тему в нужном формате.
+
+Сборка темы подразумевает раскрытие наследования, генерацию цветов
+состояний (hover, active), округление и "пикселизация" значений и т.д.
+
+### Наследование от существующей темы
+Пример:
+
 ```typescript
 import type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';
 import type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';
@@ -147,8 +200,13 @@ const {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);
 const cssString = compileStyles('css', pixelifyTheme);
 ```
 
-### Собираем локально свою тему (набор своих локальных переменных проекта)
-2. На самом деле никакой необходимости наследоваться (см. предыдущий пункт) нет, соберём свою тему из произвольного количества уникальных переменных. Пример:
+### Создание собственной темы "с нуля"
+В некоторых случаях нет необходимости наследоваться от одной из
+базовых тем. Библиотека позволяет сгенерировать свою тему из 
+произвольного количества уникальных переменных.
+
+Пример:
+
 ```typescript
 import type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';
 import {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';
@@ -180,11 +238,19 @@ const {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);
 const cssString = compileStyles('css', pixelifyTheme);
 ```
 
-# ROAD MAP библиотеки
-* [ ] Добавляем более умную генерацию active, hover состояний цвета. Будем учитывать тёмный и светлый вариант тем. Будем учитывать сам цвет, для которого генерим затемнение. (решаем проблему, что наведение на кнопки в синей шапке абсолютно не видны).
+# Roadmap
+* [ ] Добавить более умную генерацию active, hover состояний цвета.
+  При генерации нужно учитывать тёмный и светлый вариант тем, а также
+  сам цвет, для которого генерируется состояние.
+  (решаем проблему, что цвет наведения, сгенерированный от синего,
+  плохо виден на большинстве мониторов).
+* [ ] Генерация цветов по заранее определённой палитре.
+* [ ] Текстовое описание семантики каждого токена.
+* [ ] Более подробная документация.
+* [ ] Сайт с примерами и описанием.
 
 # Полезные ссылки
-1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.
-2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы, на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)
+1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается, зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.
+2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)
 3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.
-4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.
+4. [Сайт](https://paradigm.mail.ru/) дизайн-система Paradigm, из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой этого репозитория.

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