@vkontakte/vkui-tokens 4.0.0-274008.0

package/CHANGELOG.md

@@ -0,0 +1,139 @@
+# **CHANGELOG**
+
+## 4.0.0
+**BREAKING CHANGES**
+* Провели рефакторинг дизайн-системы в рамках объединения **VKUI** и **Paradigm**: удалили ненужные, добавили новые, поменяли названия старых. 
+  Изменения можно найти в [таблице](https://docs.google.com/spreadsheets/d/10DBlAGM68KyZ1DHtr-xKy-JDDqrsWaItF67fo7-hOy4/edit#gid=314413476)
+  
+* Изменили формат описания адаптивных токенов: теперь идём не от `viewport` (`touch`,`desktop`), а 
+  от состояний самого токена: `regular`, `compact`, `large` и т.д. Указывать состояния, отличные от `regular` нужно указывать тогда, и только тогда, когда они действительно отличаются.
+  
+  Для проектов использующих уже медиаквери и вьюпорты (paradigm-проекты) при генерации сделан маппинг с помощью переменной `breakpoints`.
+  
+* Переписали старую генерацию `scss`, `css`, `less`, `styl` форматов с нуля. Теперь покрыли это **автотестами**: можно зайти в тесты и посмотреть как в каждом формате обробатывается каждый вид переменной
+  _цвет, групповая переменная (шрифты), адаптивная, медиа_ и так далее. 
+  Теперь поддержка будет прозрачнее и добавление новых конструкций в процессоры не будет проблемой.
+  
+  Важно: во время переписи и из-за того, что формат адаптивных переменных сильно поменялся, то подход с ними в процессорах css тоже. 
+  Теперь везде, кроме нативного css, переменные не переопределяются автоматически через @media-query. Чтобы эту мехнику получить — нужно css файлы из `themes/${themName}/cssVars/declarations`.
+* Сделали единый базовый интерфейс дизайн-системы и описали в нём тему для `paradigm` (светлый и тёмный) и `vk` (пока только светлый).
+* Сделали расширение базового интерфейса для Paradigm тем и портальной специфики.
+* Порефакторили подход к генерации форматов:
+  * Экспортируем в пакете в папку `build` все функции с помощью которых можно собрать любой вид темы. Теперь можно по описанию темы собрать её 
+	где-то в своём проекте, а не пользоваться только готовыми отсюда 		
+  * Сделали так, чтобы любой формат темы можно было собрать хоть из одной переменной. Теперь можно легко иметь в проекте локальные переменные не связанные с дизайн-системой, но в привычном формате.
+* Изменили файловую структуру при экспорте библиотеки — теперь вместо того чтобы все собранные темы попадали в `root`
+  , они попадают в `root/themes`. Это важно, поскольку теперь в экспорте ещё есть разные полезные функции помимо тем.
+  
+* Поработали над тёмной темой сделали основную базовую тёмную тему и отдельно темные цвета
+* Удалили `flat` темы
+* Удалили `subthemes` везде
+* название пакета `@vkontakte/vkui-tokens`
+
+## 3.2.0
+* Добавили темы `octaviusDark` и `homeDark`
+* Сделали правки в типографике в `calendar`
+* Добавили экспорт объявления цветов css-vars в js и в виде строки.
+
+## 3.1.0
+* Обновили тему `otvet`, добавили тёмный вариант `otvetDark`
+* Аккуратно поправили вывод в генерации стилей (убрали ненужные строчки)
+
+## 3.0.0
+* Добавили новый вид темы `cssVars` она объявляет переменные как нативные css-custom-properties в `cssVars/${themeName}/declarations/index.css`. Там сразу сделаны изменения переменных по breakpoints, а также добавлены специальные классы для форсированного включения нужного брейкпоинта. Демо можно найти [тут](demo/example-adaptive-css-vars-theme.html);
+* Также сделали компиляцию объекта темы (в `cssVars/${themeName}/theme/index`) (`ts`, `js`, `json` форматы) в где каждая переменная представлена как `{name: '--paradigm--x1', value: 'var(--paradigm--x1, 4px)'}`
+* Добавили тестирование снапшотами на каждую тему (теперь любое изменение в теме вызовет падение тестов с полным дифом каждой переменной, нужно будет апрувить изменения, обновляя снапшоты (`npm t -- -u`))
+* Добавили расчёт тестового покрытия (`coverage`) в репозитории
+* Для удобной миграции на `cssVars` тему в `${themeName}/cssVars/theme/fallbacks` добавлены темы, процессоров, которые ссылаются на уже нативные CSS-переменные. То есть `$size-base: 4px` -> `$size-base: var(--paradigm--size_base, 4px)`
+* js,json,ts добавили поле `themeType: 'root' | 'flat' | 'pixelify' | 'cssVars'`, чтобы в runtime понимать, с каким видом темы сейчас работаем
+* В `${themeName}/cssVars/declarations` помимо `index.css` есть также файлы `onlyRoot.css` (только рутовое определение переменных без, адаптивности), а также `modern.css` (используются нативные mixin ы в css (читай про @apply))
+* **BREAKING CHANGES**: удалили генерацию `css` файлов во всех (они были невалидные, поэтому врятли кто-то ими польовался), кроме `cssVars` видах тем. Теперь чистый нативный css можно заимпортить тут: `cssVars/${themeName}/declarations/index.css`.
+* **BREAKING CHANGES**: в темах, в адаптивных переменных больше нет `default` состояния, вместо этого теперь там указан конкретный `viewport` (например, `touch` или `desktopS`). Это было сделано, так как default был по-сути алисом на `touch` viewport, что вызывало неконсистентые состояния, при использовании темы без `touch` брейкпоинта. Это нам дало следующие возможности: теперь можно создавать темы с любым подножеством брейкпоинтов, например: `['desktopS, 'desktopM']` - будет тема из двух десктопных брейкпоинтов. На самом деле это должно затронуть только описание тем, а также типы и `ts`, `js`, `json` форматы. Выходные файлы других форматов не изменились. `flat` темы всех форматов остались прежними.
+* **BREAKING CHANGES**: подняли мажор `csstype` (единственная `prod` зависимость для `npm` у токенов). Теперь `3.0.7`. (Может вызывать нюансы в типах при обновлении).
+
+
+## 2.6.1
+* Для календарной темы обновили `thumbnailColor`
+
+## 2.6.0
+* В основные темы перенесены переменные из subthemes - `colorBgPlaceholder` (цвет подложки) и `colorIconAccent` (цвет акцентированной иконки)
+* Добавлен токен `colorBgPromo` для задания цвета фона промо элементов и панелей (плашек)
+
+## 2.5.0
+* добавили переменную `sizeControlCheckBorderRadius` — _Радиус скругления чекбоксов_
+* исправили наследование `calendar` темы от octavius (больше не попадают переменные из подтем)
+* удалили подтемы из календарной темы, вместо этого создали новую тему `calendarDark` с корректным интерфейсом
+
+## 2.4.0
+* добавили тему для Облака `cloud`
+* добавили переменные (и их описания) во все темы `fontFamilyAccent`, `fontWeightAccent`, `fontWeightAccentBold`
+* сделали чуть более корректное наследование тем от `octavius` (чтобы не попадали в тему переменные subthemes, которые deprecated)
+* Исправили генерацию customMedia (убрали перекрытие breakpoints)
+
+## 2.3.1
+* Изменили скругление кнопок до 8px для календарных тем
+
+## 2.3.0
+* Добавляeтся токен "checkBoxBorderColor" для задания цвета у чекбоксов
+
+## 2.2.1
+* Добавляются токен "sizePromoArrowWidth" для корректного отображения стрелки в 2kit
+
+## 2.2.0
+* Добавляются токен на размер стрелки тултипа и токен для цвета новостного метатреда
+
+## 2.1.0
+* Добавляется генерация мапки со всеми переменными после миксина для SASS-файлов.
+
+## 2.0.0
+* имя пакета теперь снова `@paradigm/tokens` . `@paradigm/themes` больше никогда публиковаться не будет.
+* Добавлен общий интерфейс темы, от которой отнаследованы все остальные темы.
+* Добавлен общий интерфейс ОПИСАНИЯ темы. (Теперь создавая тему у вас будет тип, с которым невозможно будет забыть указать что-либо). Непонятно почему недостаточно предыдущего пункта? — скорее всего вы никогда не работали в токенах.
+* Процесс преобразования описания темы в полноценную тему полностью выводится из типов. И покрыт автотестами.
+* Добавили и настроили линтер
+* Настроили CI (проверяем линтер, jest и сборку)
+* Добавили функцию хелпер `getStateFunctions`, которая добавит к теме функции, позволяющие динамически создавать `hover`, `active` состояния.
+
+## 1.18.0
+* Обновили цвет вк по их брендбуку
+
+## 1.17.0
+* Добавили тему Задач Mail.ru
+* Добавили темную тему для календаря
+
+## 1.16.1
+* Поправили размеры шрифта в теме `calendar`
+
+## 1.16.0
+* Добавили переменные `sizeBadge[XS|S|M|L|XL]`
+
+## 1.15.0
+* добавили переменную paddingControlSelectIcon 

+
+## 1.14.0
+* добавили переменную colorButtonContrastBg 

+* добавили переменную colorCategoryToMyself в тему октавиуса
+
+## 1.13.0
+* Обновили цвета с оттенками серого во всех темах
+* Обновили тему `home` (Относледовали от `octavius` и добавили токенов)
+
+## 1.12.0
+* Добавили в тему календаря шрифт `MailSans`
+
+## 1.11.0
+* Обновили значение переменной `colorBgHighlight` `#FFF1AD`
+* Настроили корректные тайпинги для этой переменной
+
+## 1.10.0
+* Добавили переменные для ширины и высоты больших кнопок ([описание](https://gitlab.corp.mail.ru/UX/paradigm.tokens/-/blob/master/themes/descriptions.ts#L858-868))
+* Добавили тему `calls`
+
+## 1.9.0
+* Минорное обновление цветов ошибки и саксеса. Утверждено с дизайнерами
+
+## 1.8.0
+* Добавили переменную `paddingPopupBase` ([описание](https://gitlab.corp.mail.ru/UX/paradigm.tokens/blob/master/themes/descriptions.ts#L1062))
+* Добавили переменную `paddingPopupHeader` ([описание](https://gitlab.corp.mail.ru/UX/paradigm.tokens/blob/master/themes/descriptions.ts#L1068))
+* Исправили SCSS сборку темы. Заменили классы на `mixin`, корректно обрабатывает desktop/mobile статические переменные.
+

package/README.md

@@ -0,0 +1,190 @@
+<img src="assets/vkui_logo.png" alt="vkui logo" height="52"/>
+<img src="assets/logo.svg" alt="vkui logo" height="52"/>
+
+# Использование
+
+1. Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:
+```bash
+npm i --save @vkontakte/vkui-tokens@latest
+```
+## Используем css variables темы напрямую из пакета
+2. В любом css (или процессоре) импортируем css файл с объявлением переменных:
+```css
+@import "@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css";
+```
+
+3. далее используем эти переменные
+* напрямую в css (процессорах)
+```postcss
+.myAwesomeClass:hover {
+	background-color: var(--vkui--color_background--hover);
+}
+```
+* или через объект в js(ts)
+```typescript
+import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';
+
+console.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;
+console.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)
+
+// динамически (с учётом возможных переопределений)
+// узнаём чему равно значение переменной у 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`)
+
+
+## Используем root темы напрямую из пакета
+### js/ts/json
+2. Импортируем необходимую тему в файле и используем:
+```ts
+import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
+
+// do whatever you want with baseTheme
+```
+
+### Используем в scss/styl/less root темы из пакета
+2. Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)
+```scss
+@import "~@vkontakte/vkui-tokens/themes/vkBase/index";
+
+.myAwesomeClass {
+	background-color: $color-bg;
+}
+
+.myAwesomeClass:hover {
+	background-color: $color-bg--hover;
+}
+```
+
+
+###  Используем pcss формат темы из пакета
+
+2. Заходим в файл, где хотим использовать тему, и импортируем её:
+
+        @import "@vkontakte/vkui-tokens/themes/vkBase";
+
+3. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:
+
+        width: var(--size-content-block-width);
+
+4. Просто так ничего не заработает, нужно поставить postcss:
+
+        npm i --save-dev postcss
+
+   Для запуска у postcss есть командная строка, которую тоже надо установить:
+
+        npm i --save-dev postcss-cli
+
+5. Создаем конфиг 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')
+         	],
+         };
+     ```
+   Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).
+   Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.
+
+6. Устанавливаем все необходимые плагины, которые написали в конфиге, например:
+
+        npm i --save-dev postcss-import
+
+7. Настраиваем сборку postcss.
+
+   Сборка производится командой postcss через командную строку с необходимым параметрами.
+   Про них подробнее тут https://github.com/postcss/postcss-cli
+
+   Пример команды:
+
+        postcss src/main.css -c ./ --dir public
+
+   Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.
+
+## Локальная сборка своих тем инструментами библиотеки
+
+### Наследуемся от базовой темы
+2. Из библиотеки можно импортировать интерфейсы и темы от которых насследоваться всячески доопределять.
+   Также из библиотеки можно заимпортить функции позволяющие собрать тему (сгенировать состояния цветов, пикселизировать значения и т.д.) в нужном формате: css, js, scss и т.д. Пример:
+```typescript
+import type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';
+import type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';
+import {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';
+import {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';
+import {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';
+
+interface MyNewAwesomeThemeDescription extends ThemeDescription {
+	myNewAwesomeToken: Adaptive<number>;
+}
+
+const myNewAwesomeTheme: MyNewAwesomeThemeDescription = {
+	...baseTheme,
+	myNewAwesomeToken: {
+		regular: 20,
+		compact: 12,
+	},
+};
+
+// получаем разные типы тем на основе описания
+const {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);
+
+// получаем CSS-строку со всеми переменными темы,
+// которую можно вставить в DOM или сохранить в файл
+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';
+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);
+```
+
+# ROAD MAP библиотеки
+* [ ] Добавляем более умную генерацию 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)
+3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.
+4. [Сайт](https://paradigm.mail.ru/) дизайн системы Paradigm из которой выросла эта библиотека. Там можно найти дизайнерские принципы и идеи, которые стали основой кода находящемся в этом репозитории.

package/assets/logo.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="52" viewBox="0 0 192 52">
+  <g fill="none" fill-rule="evenodd">
+    <path fill="#000000" d="M40.8888889 43.8595333L40.8888889 21.9924444 44.1921111 21.9924444 44.1921111 23.6222222C45.4857778 22.3158889 47.461 21.5772222 49.4224444 21.5772222 54.1133333 21.5772222 57.9216667 25.3856667 57.9216667 30.0764444 57.9216667 34.7673333 54.1133333 38.5757556 49.4224444 38.5757556 47.461 38.5757556 45.3756667 37.7329111 44.1921111 36.3924111L44.1921111 43.8536 40.8888889 43.8595333zM49.3147778 24.9743333C46.4224444 24.9743333 44.1468889 27.0436667 44.1468889 30.0764444 44.1468889 33.1093333 46.4224444 35.1965333 49.3147778 35.1965333 52.2071111 35.1965333 54.4052222 32.9688889 54.4052222 30.0764444 54.4052222 27.1841111 52.2071111 24.9743333 49.3147778 24.9743333zM77.496 38.1605667L74.1927778 38.1605667 74.1927778 36.3924556C73.0093333 37.7329 70.924 38.5757889 68.9624444 38.5757889 64.2715556 38.5757889 60.4632222 34.7673333 60.4632222 30.0764444 60.4632222 25.3856667 64.2715556 21.5772222 68.9624444 21.5772222 70.924 21.5772222 72.8992222 22.3158889 74.1927778 23.6222222L74.1927778 21.9924444 77.496 21.9924444 77.496 38.1605667zM69.0701111 24.9743333C66.1778889 24.9743333 63.9796667 27.1841111 63.9796667 30.0764444 63.9796667 32.9688889 66.1778889 35.1965667 69.0701111 35.1965667 71.9625556 35.1965667 74.238 33.1093333 74.238 30.0764444 74.238 27.0436667 71.9625556 24.9743333 69.0701111 24.9743333zM108.921667 38.1605667L105.618444 38.1605667 105.618444 36.3924556C104.435 37.7329 102.349667 38.5757889 100.388111 38.5757889 95.6972222 38.5757889 91.8888889 34.7673333 91.8888889 30.0764444 91.8888889 25.3856667 95.6972222 21.5772222 100.388111 21.5772222 102.349667 21.5772222 104.324889 22.3158889 105.618444 23.6222222L105.618444 21.9924444 108.921667 21.9924444 108.921667 38.1605667zM100.495778 24.9743333C97.6035556 24.9743333 95.4053333 27.1841111 95.4053333 30.0764444 95.4053333 32.9688889 97.6035556 35.1965667 100.495778 35.1965667 103.388222 35.1965667 105.663667 33.1093333 105.663667 30.0764444 105.663667 27.0436667 103.388222 24.9743333 100.495778 24.9743333zM128.927778 15.3446667L128.927778 38.1606333 125.624444 38.1606333 125.624444 36.5307667C124.331111 37.8371778 122.355556 38.5757889 120.394444 38.5757889 115.703333 38.5757889 111.894889 34.7674444 111.894889 30.0765556 111.894889 25.3856667 115.703333 21.5772222 120.394444 21.5772222 122.355556 21.5772222 124.441111 22.4201111 125.624444 23.7606667L125.624444 15.3505556 128.927778 15.3446667zM120.502222 35.1787222C123.394444 35.1787222 125.67 33.1093333 125.67 30.0765556 125.67 27.0437778 123.394444 24.9565556 120.502222 24.9565556 117.609556 24.9565556 115.411333 27.1842222 115.411333 30.0765556 115.411333 32.9688889 117.609556 35.1787222 120.502222 35.1787222zM132.603333 38.1606L132.603333 21.9923778 135.963422 21.9923778 135.963422 38.1606 132.603333 38.1606zM134.283333 14.7777778C135.535556 14.7777778 136.552222 15.7944444 136.552222 17.0466667 136.552222 18.2987778 135.535556 19.3154444 134.283333 19.3154444 133.031111 19.3154444 132.014444 18.2987778 132.014444 17.0466667 132.014444 15.7944444 133.031111 14.7777778 134.283333 14.7777778zM142.46 40.3037C143.558889 41.3741667 145.18 42.5089333 147.516667 42.5100778 151.274444 42.5269778 152.618889 40.2041111 152.665556 37.2071222 152.665556 37.2070667 152.665556 37.2066556 152.665556 37.2066556L152.665556 36.3924111C151.482222 37.7329111 149.396667 38.5757556 147.435556 38.5757556 142.744444 38.5757556 138.936667 34.7673333 138.936667 30.0764444 138.936667 25.3856667 142.744444 21.5772222 147.435556 21.5772222 149.396667 21.5772222 151.372222 22.3158889 152.665556 23.6222222L152.665556 21.9924444 155.968889 21.9924444 155.968889 37.3125333 155.968889 37.3493778C155.826667 43.7595778 151.861111 45.9182 147.581111 45.9981556 144.438889 46.0568778 141.576667 44.3906667 140.046667 42.6141444L142.46 40.3037zM147.543333 24.9743333C144.651111 24.9743333 142.453333 27.1841111 142.453333 30.0764444 142.453333 32.9688889 144.651111 35.1965333 147.543333 35.1965333 150.435556 35.1965333 152.711111 33.1093333 152.711111 30.0764444 152.711111 27.0436667 150.435556 24.9743333 147.543333 24.9743333zM162.943333 38.1606L159.64 38.1606 159.64 21.9924444 162.943333 21.9924444 162.943333 23.1215556C163.676667 22.4318889 165.052222 21.5797778 166.958889 21.5772222 169.303333 21.5772222 171.051111 22.5633333 172.248889 24.1498889 173.557778 22.579 175.716667 21.5772222 177.915556 21.5772222 182.043333 21.5772222 184.856667 24.364 184.856667 28.7072222L184.856667 38.1606 181.553333 38.1606 181.553333 28.7072222C181.553333 26.5972222 179.836667 24.8804444 177.726667 24.8804444 175.616667 24.8804444 173.9 26.5972222 173.9 28.7072222L173.9 38.1606 170.596667 38.1606 170.596667 28.7072222C170.596667 26.5972222 168.88 24.8804444 166.77 24.8804444 164.66 24.8804444 162.943333 26.5972222 162.943333 28.7072222L162.943333 38.1606zM91.2616667 25.1714444L89.2664444 25.1714444C86.1044444 25.1707778 84.4722222 27.5051111 84.4722222 30.2226667 84.4722222 31.3225556 84.4754444 38.1474222 84.4754444 38.1606111L81.1668889 38.1606111 81.1668889 21.9924444 84.4754444 21.9924444 84.4754444 24.1245556C85.6423333 22.7921111 86.7667778 21.9924444 89.2664444 21.9924444L91.2616667 21.9924444 91.2616667 25.1714444z"/>
+    <path fill="#FF9E00" d="M25.2393333,6.75855556 C25.658,6.344 26.226,6.11111111 26.8182222,6.11111111 C27.4104444,6.11111111 27.9784444,6.344 28.3972222,6.75855556 C30.6886667,9.02666667 34.9125556,13.2063333 37.2045556,15.4744444 C38.0763333,16.3375556 38.0763333,17.7364444 37.2045556,18.5995556 L28.3972222,27.3154444 C27.9784444,27.73 27.4104444,27.9628889 26.8182222,27.9628889 C26.226,27.9628889 25.658,27.73 25.2393333,27.3154444 C22.9473333,25.0477778 18.7234444,20.8676667 16.4319333,18.5995556 C16.0130889,18.1852222 15.7777778,17.6231111 15.7777778,17.037 C15.7777778,16.4508889 16.0130889,15.8887778 16.4319333,15.4744444 C18.7234444,13.2063333 22.9473333,9.02666667 25.2393333,6.75855556 Z"/>
+    <path fill="#005FF9" d="M16.4615111,6.75855556 C16.8802222,6.344 17.4482111,6.11111111 18.0404556,6.11111111 C18.6326667,6.11111111 19.2006667,6.344 19.6194444,6.75855556 C21.9108889,9.02666667 26.1347778,13.2063333 28.4267778,15.4744444 C29.2985556,16.3375556 29.2985556,17.7364444 28.4267778,18.5995556 L19.6194444,27.3154444 C19.2006667,27.73 18.6326667,27.9628889 18.0404556,27.9628889 C17.4482111,27.9628889 16.8802222,27.73 16.4615111,27.3154444 C14.1695667,25.0477778 9.94564444,20.8676667 7.65415556,18.5995556 C7.23531111,18.1852222 7,17.6231111 7,17.037 C7,16.4508889 7.23531111,15.8887778 7.65415556,15.4744444 C9.94564444,13.2063333 14.1695667,9.02666667 16.4615111,6.75855556 Z"/>
+    <path fill="#002277" d="M22.4292019,9.53936417 C24.5252463,11.6136649 26.9029688,13.9665177 28.4267778,15.4744444 C29.2985556,16.3375556 29.2985556,17.7364444 28.4267778,18.5995556 L22.4292154,24.5348467 C20.3330411,22.4605416 17.9554205,20.1074855 16.4319333,18.5995556 C16.0130889,18.1852222 15.7777778,17.6231111 15.7777778,17.037 C15.7777778,16.4508889 16.0130889,15.8887778 16.4319333,15.4744444 C17.9554172,13.9665177 20.3330309,11.6136649 22.4292019,9.53936417 Z"/>
+  </g>
+</svg>

package/build/compilers/cssVars/declarations/compileBreakpointsCssVarsDeclaration.d.ts

@@ -0,0 +1,8 @@
+import { Theme, ThemeCssVarsWide } from '../../../../interfaces/general';
+export declare type DeclarationType = 'default' | 'onlyRoot' | 'modern' | 'onlyColors';
+/**
+ * Компилирует медиаквери переходы между переменными
+ * @param sourceTheme
+ * @param type
+ */
+export declare function compileBreakpointsCssVarsDeclaration<T = Theme>(sourceTheme: ThemeCssVarsWide<T, Extract<keyof T, 'breakpoints'>>, type?: DeclarationType): string | null;

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

@@ -0,0 +1,85 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compileBreakpointsCssVarsDeclaration = void 0;
+var common_tags_1 = require("common-tags");
+var findViewportByAdaptivityState_1 = require("../helpers/findViewportByAdaptivityState");
+var capitalize_1 = require("../../../helpers/capitalize");
+var convertCamelToSnake_1 = require("../../../helpers/convertCamelToSnake");
+var getOnlyColors_1 = require("../../../helpers/getOnlyColors");
+var customMedia_1 = require("../../../themeProcessors/customMedia/customMedia");
+var accumulateValues_1 = require("../helpers/accumulateValues");
+var getVarString_1 = require("../helpers/getVarString");
+/**
+ * Компилирует медиаквери переходы между переменными
+ * @param sourceTheme
+ * @param type
+ */
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function compileBreakpointsCssVarsDeclaration(sourceTheme, type) {
+    if (type === void 0) { type = 'default'; }
+    if (!('breakpoints' in sourceTheme)) {
+        return null;
+    }
+    var breakpoints = sourceTheme['breakpoints'];
+    var customMedia = customMedia_1.processCustomMedia(sourceTheme);
+    var theme = type === 'onlyColors' ? getOnlyColors_1.getOnlyColors(sourceTheme) : sourceTheme;
+    var adaptiveValues = accumulateValues_1.accumulateValues({
+        theme: theme,
+    }).adaptiveValues;
+    var result = '';
+    if (!Object.keys(adaptiveValues.auto).length) {
+        return null;
+    }
+    result += common_tags_1.stripIndent(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t:root {\n", "\n\t}"], ["\n\t:root {\n", "\n\t}"])), getVarString_1.getVarString({ valuesObject: adaptiveValues.auto, prefix: '\t\t' }));
+    var adaptivityStatesLength = Object.keys(adaptiveValues).length;
+    // только regular и auto
+    if (adaptivityStatesLength === 2) {
+        return result;
+    }
+    var regularValues = '';
+    var mediaValues = '';
+    Object.entries(adaptiveValues)
+        .sort(function (_a) {
+        var a = _a[0];
+        return (a === 'regular' ? 1 : -1);
+    })
+        .forEach(function (_a) {
+        var adaptivityState = _a[0], valuesObject = _a[1];
+        var isRegular = adaptivityState === 'regular';
+        if (adaptivityState === 'auto') {
+            return;
+        }
+        var usedViewport = findViewportByAdaptivityState_1.findViewportByAdaptivityState(breakpoints, adaptivityState);
+        mediaValues += common_tags_1.stripIndent(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\t\t@media ", " {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t"], ["\n\t\t\t@media ", " {\n\t\t\t\t:root, .vkui--force-auto {\n\t\t\t\t\t",
+            "\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.vkui--force-", " {\n\t\t\t\t",
+            "\n\t\t\t}\n\t\t\t"])), customMedia["width" + capitalize_1.capitalize(usedViewport)], common_tags_1.stripIndents(isRegular
+            ? regularValues
+            : getVarString_1.getVarString({
+                valuesObject: valuesObject,
+                prefix: '',
+                callback: function (name) {
+                    if (isRegular) {
+                        return;
+                    }
+                    var regularName = name.replace(new RegExp(adaptivityState + "$"), 'regular');
+                    var regularValue = adaptiveValues.regular[regularName];
+                    if (regularValue) {
+                        regularValues += regularName + ": " + regularValue + ";\n";
+                    }
+                },
+            })), convertCamelToSnake_1.convertCamelToSnake(usedViewport), common_tags_1.stripIndents(isRegular
+            ? regularValues
+            : getVarString_1.getVarString({
+                valuesObject: valuesObject,
+                prefix: '',
+            })));
+        mediaValues += '\n\n';
+    });
+    return common_tags_1.stripIndent(result + "\n\n" + mediaValues);
+}
+exports.compileBreakpointsCssVarsDeclaration = compileBreakpointsCssVarsDeclaration;
+var templateObject_1, templateObject_2;

package/build/compilers/cssVars/declarations/compileBreakpointsCssVarsDeclaration.test.d.ts

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

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

@@ -0,0 +1,156 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var common_tags_1 = require("common-tags");
+var compileBreakpointsCssVarsDeclaration_1 = require("./compileBreakpointsCssVarsDeclaration");
+describe('compileBreakpointsCssVarsDeclaration', function () {
+    it('should not work without breakpoints', function () {
+        var theme = {};
+        expect(compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration(theme)).toBe(null);
+    });
+    it('should work with breakpoints and empty vals', function () {
+        var theme = {
+            breakpoints: {
+                touch: {
+                    breakpoint: 0,
+                    adaptiveValue: 'compactX',
+                },
+                desktopS: {
+                    breakpoint: 768,
+                    adaptiveValue: 'regular',
+                },
+            },
+        };
+        expect(compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration(theme)).toBe(null);
+    });
+    it('should work with non adaptive values', function () {
+        var theme = {
+            breakpoints: {
+                touch: {
+                    breakpoint: 0,
+                    adaptiveValue: 'compactX',
+                },
+                desktopS: {
+                    breakpoint: 768,
+                    adaptiveValue: 'regular',
+                },
+            },
+            x1: {
+                name: '--vkui--x1',
+                value: 'var(--vkui--x1, 4px)',
+                originalValue: '4px',
+            },
+        };
+        expect(compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration(theme)).toBe(null);
+    });
+    it('should work with flat adaptive values and several breakpotins', function () {
+        var theme = {
+            breakpoints: {
+                touch: {
+                    breakpoint: 0,
+                    adaptiveValue: 'compact',
+                },
+                desktopS: {
+                    breakpoint: 768,
+                    adaptiveValue: 'regular',
+                },
+            },
+            sizePopupBasePadding: {
+                auto: {
+                    name: '--vkui--size_popup_base_padding',
+                    value: 'var(--vkui--size_popup_base_padding)',
+                },
+                compact: {
+                    name: '--vkui--size_popup_base_padding--compact',
+                    value: 'var(--vkui--size_popup_base_padding--compact, 16px)',
+                    originalValue: '16px',
+                },
+                regular: {
+                    name: '--vkui--size_popup_base_padding--regular',
+                    value: 'var(--vkui--size_popup_base_padding--regular, 20px)',
+                    originalValue: '20px',
+                },
+            },
+        };
+        expect(compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration(theme))
+            .toBe(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 () {
+        var theme = {
+            breakpoints: {
+                touch: {
+                    breakpoint: 0,
+                    adaptiveValue: 'compact',
+                },
+                desktopS: {
+                    breakpoint: 768,
+                    adaptiveValue: 'regular',
+                },
+            },
+            sizePopupBasePadding: {
+                auto: {
+                    name: '--vkui--size_popup_base_padding',
+                    value: 'var(--vkui--size_popup_base_padding)',
+                },
+                regular: {
+                    name: '--vkui--size_popup_base_padding--regular',
+                    value: 'var(--vkui--size_popup_base_padding--regular, 20px)',
+                    originalValue: '20px',
+                },
+            },
+        };
+        expect(compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration(theme))
+            .toBe(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 () {
+        var theme = {
+            breakpoints: {
+                touch: {
+                    breakpoint: 0,
+                    adaptiveValue: 'compact',
+                },
+                desktopS: {
+                    breakpoint: 768,
+                    adaptiveValue: 'regular',
+                },
+            },
+            fontH1: {
+                auto: {
+                    fontSize: {
+                        name: '--vkui--font_h1--font_size',
+                        value: 'var(--vkui--font_h1--font_size)',
+                    },
+                    lineHeight: {
+                        name: '--vkui--font_h1--line_height',
+                        value: 'var(--vkui--font_h1--line_height)',
+                    },
+                },
+                compact: {
+                    fontSize: {
+                        name: '--vkui--font_h1--font_size--compact',
+                        value: 'var(--vkui--font_h1--font_size--compact, 24px)',
+                        originalValue: '24px',
+                    },
+                },
+                regular: {
+                    fontSize: {
+                        name: '--vkui--font_h1--font_size--regular',
+                        value: 'var(--vkui--font_h1--font_size--regular, 22px)',
+                        originalValue: '22px',
+                    },
+                    lineHeight: {
+                        name: '--vkui--font_h1--line_height--regular',
+                        value: 'var(--vkui--font_h1--line_height--regular, 30px)',
+                        originalValue: '30px',
+                    },
+                },
+            },
+        };
+        expect(compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration(theme))
+            .toBe(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/helpers/accumulateValues.d.ts

@@ -0,0 +1,20 @@
+import { Theme } from '../../../../interfaces/general';
+import { Adaptive } from '../../../../interfaces/general/tools';
+export declare type FlatValuesObject = {
+    [key: string]: string | number;
+};
+export declare type AdaptiveValuesObject = {
+    auto: FlatValuesObject;
+    regular: FlatValuesObject;
+} & {
+    [key in keyof Exclude<Adaptive<any>, 'regular'>]?: FlatValuesObject;
+};
+interface Params<T = Theme> {
+    theme: T;
+}
+interface ReturnValues {
+    flatValues: FlatValuesObject;
+    adaptiveValues: AdaptiveValuesObject;
+}
+export declare function accumulateValues<T = Theme>({ theme }: Params<T>): ReturnValues;
+export {};