@vkontakte/vkui-tokens 4.27.0 → 4.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +98 -79
  2. package/build/compilers/cssVars/declarations/compileBreakpointsCssVarsDeclaration.test.js +3 -6
  3. package/build/compilers/cssVars/helpers/accumulateValues.js +2 -6
  4. package/build/compilers/docs/compileDocsJSON.js +1 -4
  5. package/build/compilers/index.js +1 -3
  6. package/build/compilers/styles/helpers/tokenProcessors.js +2 -5
  7. package/build/compilers/ts/compileTypeScript.test.js +1 -2
  8. package/build/helpers/convertCamelToSnake.js +1 -3
  9. package/build/helpers/flatifyTheme.js +1 -7
  10. package/build/helpers/getStateFunctions.js +4 -13
  11. package/build/themeProcessors/customMedia/customMedia.test.js +1 -4
  12. package/build/themeProcessors/extractVarsNames/extractVarsNames.js +1 -3
  13. package/package.json +4 -3
package/README.md CHANGED
@@ -14,19 +14,19 @@
14
14
 
15
15
  # Содержание
16
16
 
17
- * [Использование](#использование)
18
- * [Использование CSS-переменных темы напрямую из пакета](#использование-css-переменных-темы-напрямую-из-пакета)
19
- * [Подключение темы на страницу](#подключение-темы-на-страницу)
20
- * [Использование переменных в вёрстке](#использование-переменных-в-вёрстке)
21
- * [Использование базовой темы напрямую из пакета](#использование-базовой-темы-напрямую-из-пакета)
22
- * [Инструменты](#инструменты)
23
- * [Локальная сборка своих тем инструментами библиотеки](#локальная-сборка-своих-тем-инструментами-библиотеки)
24
- * [Наследование от существующей темы](#наследование-от-существующей-темы)
25
- * [Создание собственной темы "с нуля"](#создание-собственной-темы-с-нуля)
26
- * [Roadmap](#roadmap)
27
- * [Полезные ссылки](#полезные-ссылки)
28
- * [Информация для внесения изменений](CONTRIBUTING.md)
29
- * [Changelog (архивная версия)](CHANGELOG.OLD.md)
17
+ - [Использование](#использование)
18
+ - [Использование CSS-переменных темы напрямую из пакета](#использование-css-переменных-темы-напрямую-из-пакета)
19
+ - [Подключение темы на страницу](#подключение-темы-на-страницу)
20
+ - [Использование переменных в вёрстке](#использование-переменных-в-вёрстке)
21
+ - [Использование базовой темы напрямую из пакета](#использование-базовой-темы-напрямую-из-пакета)
22
+ - [Инструменты](#инструменты)
23
+ - [Локальная сборка своих тем инструментами библиотеки](#локальная-сборка-своих-тем-инструментами-библиотеки)
24
+ - [Наследование от существующей темы](#наследование-от-существующей-темы)
25
+ - [Создание собственной темы "с нуля"](#создание-собственной-темы-с-нуля)
26
+ - [Roadmap](#roadmap)
27
+ - [Полезные ссылки](#полезные-ссылки)
28
+ - [Информация для внесения изменений](CONTRIBUTING.md)
29
+ - [Changelog (архивная версия)](CHANGELOG.OLD.md)
30
30
 
31
31
  Актуальный changelog находится на странице
32
32
  [релизов в GitHub](https://github.com/VKCOM/vkui-tokens/releases)!
@@ -34,19 +34,25 @@
34
34
  # Использование
35
35
 
36
36
  Устанавливаем npm-пакет `@vkontakte/vkui-tokens`:
37
+
37
38
  ```bash
38
39
  npm i --save @vkontakte/vkui-tokens@latest
39
40
  ```
41
+
40
42
  ## Использование CSS-переменных темы напрямую из пакета
43
+
41
44
  ### Подключение темы на страницу
42
45
 
43
46
  В любом CSS-файле подключаем файл темы со значениями переменных:
47
+
44
48
  ```css
45
- @import "@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css";
49
+ @import '@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css';
46
50
  ```
47
51
 
48
52
  ### Использование переменных в вёрстке
53
+
49
54
  #### Использование в CSS
55
+
50
56
  ```postcss
51
57
  .myAwesomeClass:hover {
52
58
  background-color: var(--vkui--color_background--hover);
@@ -54,33 +60,38 @@ npm i --save @vkontakte/vkui-tokens@latest
54
60
  ```
55
61
 
56
62
  #### Использование CSS-переменных через объект в JavaScript (TypeScript)
63
+
57
64
  ```typescript
58
65
  import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase/cssVars/theme';
59
66
 
60
67
  // Собствено имя CSS-переменной (название токена)
61
- console.log(baseTheme.colorBackground.hover.name) // --vkui--color_background--hover;
68
+ console.log(baseTheme.colorBackground.hover.name); // --vkui--color_background--hover;
62
69
  // Сниппет для использования CSS-переменной
63
- console.log(baseTheme.colorBackground.hover.value) // var(--vkui--color_background--hover, #F5F5F7)
70
+ console.log(baseTheme.colorBackground.hover.value); // var(--vkui--color_background--hover, #F5F5F7)
64
71
 
65
72
  // Динамически (с учётом возможных переопределений)
66
73
  // узнаём, чему равно значение переменной внутри myElement:
67
- getComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name)
74
+ getComputedStyle(myElement).getPropertyValue(baseTheme.colorBackground.hover.name);
68
75
  ```
69
76
 
70
77
  #### Принудительное использование токенов определённого размера
71
- Чтобы принудительно включить тот или иной вид темы у конкретного
72
- поддерева элементов, нужно воспользоваться классами
78
+
79
+ Чтобы принудительно включить тот или иной вид темы у конкретного
80
+ поддерева элементов, нужно воспользоваться классами
73
81
  `.vkui--force-${auto | regular | compact | large | largeX ...}`.
74
- Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы
82
+ Смотри [демо](demo/example-adaptive-css-vars-theme.html) работы
75
83
  адаптивных переменных и спец. классов.
76
84
 
77
- Также можно просто использовать переменную конкретного брейкпоинта
78
- (ex. --vkui--size_field_height--**_compact_**), они все тоже
85
+ Также можно просто использовать переменную конкретного брейкпоинта
86
+ (ex. --vkui--size*field_height--\*\*\_compact*\*\*), они все тоже
79
87
  попадают в `:root`)
80
88
 
81
89
  ## Использование базовой темы напрямую из пакета
90
+
82
91
  ### js/ts/json
92
+
83
93
  Импортируем необходимую тему в файле и используем:
94
+
84
95
  ```ts
85
96
  import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
86
97
 
@@ -88,9 +99,11 @@ import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
88
99
  ```
89
100
 
90
101
  ### Используем в scss/styl/less root темы из пакета
102
+
91
103
  Импортируем файл с необходимой темой и используем переменные от туда (снизу синтаксис SCSS)
104
+
92
105
  ```scss
93
- @import "~@vkontakte/vkui-tokens/themes/vkBase/index";
106
+ @import '~@vkontakte/vkui-tokens/themes/vkBase/index';
94
107
 
95
108
  .myAwesomeClass {
96
109
  background-color: $color-bg;
@@ -101,67 +114,69 @@ import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
101
114
  }
102
115
  ```
103
116
 
104
- ### Используем pcss формат темы из пакета
117
+ ### Используем pcss формат темы из пакета
105
118
 
106
- 1. Заходим в файл, где хотим использовать тему, и импортируем её:
119
+ 1. Заходим в файл, где хотим использовать тему, и импортируем её:
107
120
 
108
121
  @import "@vkontakte/vkui-tokens/themes/vkBase";
109
122
 
110
- 2. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:
123
+ 2. Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:
111
124
 
112
125
  width: var(--size-content-block-width);
113
126
 
114
- 3. Просто так ничего не заработает, нужно поставить postcss:
127
+ 3. Просто так ничего не заработает, нужно поставить postcss:
115
128
 
116
- npm i --save-dev postcss
129
+ npm i --save-dev postcss
117
130
 
118
- Для запуска у postcss есть командная строка, которую тоже надо установить:
131
+ Для запуска у postcss есть командная строка, которую тоже надо установить:
119
132
 
120
- npm i --save-dev postcss-cli
133
+ npm i --save-dev postcss-cli
121
134
 
122
- 4. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:
135
+ 4. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:
123
136
 
124
- ```javascript
125
- const postcssPresetEnv = require('postcss-preset-env');
137
+ ```javascript
138
+ const postcssPresetEnv = require('postcss-preset-env');
126
139
 
127
- module.exports = {
128
- plugins: [
129
- require('postcss-import'),
130
- require('precss'),
131
- require('postcss-css-variables'),
132
- require('postcss-custom-media'),
133
- require('postcss-media-minmax'),
134
- require('postcss-extend-rule'),
135
- postcssPresetEnv({
136
- stage: 0,
137
- }),
138
- require('postcss-color-mix'),
139
- require('cssnano')
140
- ],
141
- };
142
- ```
143
- Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).
144
- Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.
140
+ module.exports = {
141
+ plugins: [
142
+ require('postcss-import'),
143
+ require('precss'),
144
+ require('postcss-css-variables'),
145
+ require('postcss-custom-media'),
146
+ require('postcss-media-minmax'),
147
+ require('postcss-extend-rule'),
148
+ postcssPresetEnv({
149
+ stage: 0,
150
+ }),
151
+ require('postcss-color-mix'),
152
+ require('cssnano'),
153
+ ],
154
+ };
155
+ ```
145
156
 
146
- 5. Устанавливаем все необходимые плагины, которые написали в конфиге, например:
157
+ Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).
158
+ Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.
159
+
160
+ 5. Устанавливаем все необходимые плагины, которые написали в конфиге, например:
147
161
 
148
162
  npm i --save-dev postcss-import
149
163
 
150
- 6. Настраиваем сборку postcss.
164
+ 6. Настраиваем сборку postcss.
151
165
 
152
- Сборка производится командой postcss через командную строку с необходимым параметрами.
153
- Про них подробнее тут https://github.com/postcss/postcss-cli
166
+ Сборка производится командой postcss через командную строку с необходимым параметрами.
167
+ Про них подробнее тут https://github.com/postcss/postcss-cli
154
168
 
155
- Пример команды:
169
+ Пример команды:
156
170
 
157
- postcss src/main.css -c ./ --dir public
171
+ postcss src/main.css -c ./ --dir public
158
172
 
159
- Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.
173
+ Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.
160
174
 
161
175
  # Инструменты
176
+
162
177
  ## Локальная сборка своих тем инструментами библиотеки
163
178
 
164
- Библиотека предоставляет интерфейсы и темы, от которых можно
179
+ Библиотека предоставляет интерфейсы и темы, от которых можно
165
180
  наследоваться.
166
181
 
167
182
  Помимо этого, библиотека предоставляет набор функций, которые позволяют
@@ -171,14 +186,15 @@ import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
171
186
  состояний (hover, active), округление и "пикселизация" значений и т.д.
172
187
 
173
188
  ### Наследование от существующей темы
189
+
174
190
  Пример:
175
191
 
176
192
  ```typescript
177
- import type {ThemeDescription} from '@vkontakte/vkui-tokens/interfaces/general';
178
- import type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';
179
- import {lightTheme as baseTheme} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';
180
- import {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';
181
- import {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';
193
+ import type { ThemeDescription } from '@vkontakte/vkui-tokens/interfaces/general';
194
+ import type { Adaptive } from '@vkontakte/vkui-tokens/interfaces/general/tools';
195
+ import { lightTheme as baseTheme } from '@vkontakte/vkui-tokens/themeDescriptions/base/vk';
196
+ import { expandAll } from '@vkontakte/vkui-tokens/build/expandTheme';
197
+ import { compileStyles } from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';
182
198
 
183
199
  interface MyNewAwesomeThemeDescription extends ThemeDescription {
184
200
  myNewAwesomeToken: Adaptive<number>;
@@ -193,7 +209,7 @@ const myNewAwesomeTheme: MyNewAwesomeThemeDescription = {
193
209
  };
194
210
 
195
211
  // получаем разные типы тем на основе описания
196
- const {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);
212
+ const { theme, pixelifyTheme, cssVarsTheme } = expandAll(myNewAwesomeTheme);
197
213
 
198
214
  // получаем CSS-строку со всеми переменными темы,
199
215
  // которую можно вставить в DOM или сохранить в файл
@@ -201,16 +217,17 @@ const cssString = compileStyles('css', pixelifyTheme);
201
217
  ```
202
218
 
203
219
  ### Создание собственной темы "с нуля"
220
+
204
221
  В некоторых случаях нет необходимости наследоваться от одной из
205
- базовых тем. Библиотека позволяет сгенерировать свою тему из
222
+ базовых тем. Библиотека позволяет сгенерировать свою тему из
206
223
  произвольного количества уникальных переменных.
207
224
 
208
225
  Пример:
209
226
 
210
227
  ```typescript
211
- import type {Adaptive} from '@vkontakte/vkui-tokens/interfaces/general/tools';
212
- import {expandAll} from '@vkontakte/vkui-tokens/build/expandTheme';
213
- import {compileStyles} from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';
228
+ import type { Adaptive } from '@vkontakte/vkui-tokens/interfaces/general/tools';
229
+ import { expandAll } from '@vkontakte/vkui-tokens/build/expandTheme';
230
+ import { compileStyles } from '@vkontakte/vkui-tokens/build/compilers/styles/compileStyles';
214
231
 
215
232
  interface MyNewAwesomeThemeDescription {
216
233
  myNewAwesomeToken: Adaptive<number>;
@@ -224,7 +241,7 @@ const myNewAwesomeTheme: MyNewAwesomeThemeDescription = {
224
241
  };
225
242
 
226
243
  // получаем разные типы тем на основе описания
227
- const {theme, pixelifyTheme, cssVarsTheme} = expandAll(myNewAwesomeTheme);
244
+ const { theme, pixelifyTheme, cssVarsTheme } = expandAll(myNewAwesomeTheme);
228
245
 
229
246
  // получаем CSS-строку со всеми переменными темы,
230
247
  // которую можно вставить в DOM или сохранить в файл
@@ -239,17 +256,19 @@ const cssString = compileStyles('css', pixelifyTheme);
239
256
  ```
240
257
 
241
258
  # Roadmap
242
- * [ ] Добавить более умную генерацию active, hover состояний цвета.
243
- При генерации нужно учитывать тёмный и светлый вариант тем, а также
244
- сам цвет, для которого генерируется состояние.
245
- (решаем проблему, что цвет наведения, сгенерированный от синего,
246
- плохо виден на большинстве мониторов).
247
- * [ ] Генерация цветов по заранее определённой палитре.
248
- * [ ] Текстовое описание семантики каждого токена.
249
- * [ ] Более подробная документация.
250
- * [ ] Сайт с примерами и описанием.
259
+
260
+ - [ ] Добавить более умную генерацию active, hover состояний цвета.
261
+ При генерации нужно учитывать тёмный и светлый вариант тем, а также
262
+ сам цвет, для которого генерируется состояние.
263
+ (решаем проблему, что цвет наведения, сгенерированный от синего,
264
+ плохо виден на большинстве мониторов).
265
+ - [ ] Генерация цветов по заранее определённой палитре.
266
+ - [ ] Текстовое описание семантики каждого токена.
267
+ - [ ] Более подробная документация.
268
+ - [ ] Сайт с примерами и описанием.
251
269
 
252
270
  # Полезные ссылки
271
+
253
272
  1. [Доклад](https://youtu.be/0rHgqQvl0NQ?t=1858) про дизайн-системы на фронтенде: там рассказывается, зачем нужны дизайн-токены, причём тут UI-kit и как делать темизацию.
254
273
  2. Серия видеороликов на youtube, где показано использование этой библиотеки (но со старым названием, не пугайтесь), как ядра дизайн-системы на практике: [первый](https://www.youtube.com/watch?v=RKCsrPOxYWE), [второй](https://www.youtube.com/watch?v=ZhiH4jFL-kU), [третий](https://www.youtube.com/watch?v=ZXOmmkyxrwk)
255
274
  3. Opensource библиотека компонентов (UI-kit) [VKUI](https://github.com/VKCOM/VKUI), которая использует токены.
package/build/compilers/cssVars/declarations/compileBreakpointsCssVarsDeclaration.test.js CHANGED
@@ -75,8 +75,7 @@ describe('compileBreakpointsCssVarsDeclaration', function () {
75
75
  },
76
76
  },
77
77
  };
78
- expect((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme))
79
- .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"]))));
78
+ 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"]))));
80
79
  });
81
80
  it('should work with flat adaptive values and several breakpotins and without overriding', function () {
82
81
  var theme = {
@@ -102,8 +101,7 @@ describe('compileBreakpointsCssVarsDeclaration', function () {
102
101
  },
103
102
  },
104
103
  };
105
- expect((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme))
106
- .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"]))));
104
+ 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"]))));
107
105
  });
108
106
  it('should work with adaptive complex object', function () {
109
107
  var theme = {
@@ -149,8 +147,7 @@ describe('compileBreakpointsCssVarsDeclaration', function () {
149
147
  },
150
148
  },
151
149
  };
152
- expect((0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme))
153
- .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"]))));
150
+ 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"]))));
154
151
  });
155
152
  });
156
153
  var templateObject_1, templateObject_2, templateObject_3;
package/build/compilers/cssVars/helpers/accumulateValues.js CHANGED
@@ -4,9 +4,7 @@ exports.accumulateValues = void 0;
4
4
  var tools_1 = require("../../../../interfaces/general/tools");
5
5
  var passOriginalValue = function (_a) {
6
6
  var toValue = _a.toValue, fromValue = _a.fromValue;
7
- if (typeof toValue === 'object' &&
8
- 'name' in toValue &&
9
- typeof toValue.name === 'string') {
7
+ if (typeof toValue === 'object' && 'name' in toValue && typeof toValue.name === 'string') {
10
8
  toValue.originalValue = fromValue.originalValue;
11
9
  return;
12
10
  }
@@ -30,9 +28,7 @@ var constructSourceVal = function (_a) {
30
28
  };
31
29
  var fillValues = function (_a) {
32
30
  var destination = _a.destination, value = _a.value, adaptiveDestination = _a.adaptiveDestination, autoValue = _a.autoValue, manyAdaptiveStates = _a.manyAdaptiveStates;
33
- if (typeof value === 'object' &&
34
- 'name' in value &&
35
- typeof value.name === 'string') {
31
+ if (typeof value === 'object' && 'name' in value && typeof value.name === 'string') {
36
32
  constructSourceVal({
37
33
  destination: destination,
38
34
  value: value,
package/build/compilers/docs/compileDocsJSON.js CHANGED
@@ -27,10 +27,7 @@ function getTagText(tag) {
27
27
  function resolveDeclaration(declaration) {
28
28
  if (ts_morph_1.Node.isExportSpecifier(declaration)) {
29
29
  // export { A as B } from 'path/to/module.ts'
30
- var declarations = declaration
31
- .getNameNode()
32
- .getSymbol()
33
- .getDeclarations();
30
+ var declarations = declaration.getNameNode().getSymbol().getDeclarations();
34
31
  return resolveDeclarations(declarations);
35
32
  }
36
33
  return [declaration];
package/build/compilers/index.js CHANGED
@@ -95,9 +95,7 @@ function writeCssVarsSourceFile(themePath, theme, cssVarsTheme, themeBase) {
95
95
  for (var _i = 0, cssModes_1 = cssModes; _i < cssModes_1.length; _i++) {
96
96
  var modeConfig = cssModes_1[_i];
97
97
  var filePath = path_1.default.resolve(themePath, modeConfig.fileName);
98
- var compiledVars = (0, compileStyles_1.compileStyles)('css', theme, modeConfig.mode === 'default'
99
- ? 'withAdaptiveGroups'
100
- : modeConfig.mode, themeBase);
98
+ var compiledVars = (0, compileStyles_1.compileStyles)('css', theme, modeConfig.mode === 'default' ? 'withAdaptiveGroups' : modeConfig.mode, themeBase);
101
99
  var compiledBreakpoints = modeConfig.mode === 'default'
102
100
  ? "\n\n".concat((_a = (0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(cssVarsTheme)) !== null && _a !== void 0 ? _a : '')
103
101
  : '';
package/build/compilers/styles/helpers/tokenProcessors.js CHANGED
@@ -129,8 +129,7 @@ function processGroupToken(_a) {
129
129
  var format = _a.format, token = _a.token, key = _a.key, prefix = _a.prefix, _b = _a.adaptiveMode, adaptiveMode = _b === void 0 ? 'none' : _b;
130
130
  var needUpdateVariables = format === exports.EStyleTypes.CSS;
131
131
  var needMap = format === exports.EStyleTypes.SCSS;
132
- var needAddAdaptiveClasses = (adaptiveMode === 'withAdaptiveGroups' ||
133
- adaptiveMode === 'onlyAdaptiveGroups') &&
132
+ var needAddAdaptiveClasses = (adaptiveMode === 'withAdaptiveGroups' || adaptiveMode === 'onlyAdaptiveGroups') &&
134
133
  format === exports.EStyleTypes.CSS;
135
134
  var defineStyleProperty = function (subKey, subToken, varName) {
136
135
  var result = "\t".concat((0, unCamelcasify_1.unCamelcasify)(subKey), ": ").concat(subToken, ";\n");
@@ -159,9 +158,7 @@ function processGroupToken(_a) {
159
158
  var varName = '';
160
159
  if (needUpdateVariables) {
161
160
  var reallyNewToken = token[adaptivityState][subKey] !== undefined;
162
- varName = "".concat(exports.varDeclarations.css(key, prefix), "--").concat((0, unCamelcasify_1.unCamelcasify)(subKey, '_'), "--").concat(reallyNewToken
163
- ? (0, unCamelcasify_1.unCamelcasify)(adaptivityState, '_')
164
- : 'regular');
161
+ varName = "".concat(exports.varDeclarations.css(key, prefix), "--").concat((0, unCamelcasify_1.unCamelcasify)(subKey, '_'), "--").concat(reallyNewToken ? (0, unCamelcasify_1.unCamelcasify)(adaptivityState, '_') : 'regular');
165
162
  if (reallyNewToken) {
166
163
  variables += exports.variablesStatementDeclaration.css(varName, subValue);
167
164
  }
package/build/compilers/ts/compileTypeScript.test.js CHANGED
@@ -6,7 +6,6 @@ describe('compileTypeScript', function () {
6
6
  themeName: 'base',
7
7
  };
8
8
  it('should work', function () {
9
- expect((0, compileTypeScript_1.compileTypeScript)(testData))
10
- .toBe("import { $$InterfaceName$$ } from '$$InterfaceURL$$';\n\nconst theme: $$InterfaceName$$ = {\n\t\"themeName\": \"base\"\n};\n\nexport default theme;\nexport { $$InterfaceName$$ };\n");
9
+ 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");
11
10
  });
12
11
  });
package/build/helpers/convertCamelToSnake.js CHANGED
@@ -5,8 +5,6 @@ exports.convertCamelToSnake = void 0;
5
5
  * camelCase -> snake_case
6
6
  */
7
7
  function convertCamelToSnake(str) {
8
- return str
9
- .replace(/([A-Z])/g, function (letter) { return "_".concat(letter.toLowerCase()); })
10
- .replace(/^_/, '');
8
+ return str.replace(/([A-Z])/g, function (letter) { return "_".concat(letter.toLowerCase()); }).replace(/^_/, '');
11
9
  }
12
10
  exports.convertCamelToSnake = convertCamelToSnake;
package/build/helpers/flatifyTheme.js CHANGED
@@ -2,13 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.flatifyTheme = void 0;
4
4
  function flatifyTheme(theme, removeStates) {
5
- if (removeStates === void 0) { removeStates = [
6
- 'compactX',
7
- 'compact',
8
- 'large',
9
- 'largeX',
10
- 'largeXX',
11
- ]; }
5
+ if (removeStates === void 0) { removeStates = ['compactX', 'compact', 'large', 'largeX', 'largeXX']; }
12
6
  return Object.entries(theme).reduce(function (acc, _a) {
13
7
  var themeKey = _a[0], themeValue = _a[1];
14
8
  if (typeof themeValue === 'object') {
package/build/helpers/getStateFunctions.js CHANGED
@@ -13,31 +13,22 @@ function getStateFunctions(theme) {
13
13
  if (colorHover === 'transparent') {
14
14
  return "rgba(".concat(colorState, ",").concat(theme.toneValueHover, ")");
15
15
  }
16
- return (0, color_1.default)(colorHover)
17
- .mix((0, color_1.default)(colorState), theme.toneValueHover)
18
- .hex();
16
+ return (0, color_1.default)(colorHover).mix((0, color_1.default)(colorState), theme.toneValueHover).hex();
19
17
  },
20
18
  stateActive: function (colorActive) {
21
19
  if (colorActive === 'transparent') {
22
20
  return "rgba(".concat(colorState, ",").concat(theme.toneValueActive, ")");
23
21
  }
24
- return (0, color_1.default)(colorActive)
25
- .mix((0, color_1.default)(colorState), theme.toneValueActive)
26
- .hex();
22
+ return (0, color_1.default)(colorActive).mix((0, color_1.default)(colorState), theme.toneValueActive).hex();
27
23
  },
28
24
  stateFocus: function (colorFocus) {
29
25
  if (colorFocus === 'transparent') {
30
26
  return "rgba(".concat(colorState, ",").concat(theme.toneValueFocus, ")");
31
27
  }
32
- return (0, color_1.default)(colorFocus)
33
- .mix((0, color_1.default)(colorState), theme.toneValueFocus)
34
- .hex();
28
+ return (0, color_1.default)(colorFocus).mix((0, color_1.default)(colorState), theme.toneValueFocus).hex();
35
29
  },
36
30
  stateDisabled: function (colorDisabled) {
37
- return (0, color_1.default)(colorDisabled)
38
- .alpha(theme.opacityDisable)
39
- .rgb()
40
- .string();
31
+ return (0, color_1.default)(colorDisabled).alpha(theme.opacityDisable).rgb().string();
41
32
  },
42
33
  };
43
34
  }
package/build/themeProcessors/customMedia/customMedia.test.js CHANGED
@@ -25,10 +25,7 @@ describe('customMedia', function () {
25
25
  adaptiveValue: 'regular',
26
26
  },
27
27
  };
28
- expect((0, customMedia_1.getUsingViewports)(breakpoints)).toStrictEqual([
29
- 'touch',
30
- 'desktopS',
31
- ]);
28
+ expect((0, customMedia_1.getUsingViewports)(breakpoints)).toStrictEqual(['touch', 'desktopS']);
32
29
  });
33
30
  it('should sort breakpoints', function () {
34
31
  var breakpoints = {
package/build/themeProcessors/extractVarsNames/extractVarsNames.js CHANGED
@@ -31,9 +31,7 @@ function getVariableName(_a) {
31
31
  if (key === 'normal') {
32
32
  return "--".concat((0, convertCamelToSnake_1.convertCamelToSnake)(prefix));
33
33
  }
34
- return "--".concat((0, convertCamelToSnake_1.convertCamelToSnake)(prefix), "--").concat((0, convertCamelToSnake_1.convertCamelToSnake)(key)).concat(mode !== undefined && mode !== 'auto'
35
- ? "--".concat((0, convertCamelToSnake_1.convertCamelToSnake)(mode))
36
- : '');
34
+ return "--".concat((0, convertCamelToSnake_1.convertCamelToSnake)(prefix), "--").concat((0, convertCamelToSnake_1.convertCamelToSnake)(key)).concat(mode !== undefined && mode !== 'auto' ? "--".concat((0, convertCamelToSnake_1.convertCamelToSnake)(mode)) : '');
37
35
  }
38
36
  exports.getVariableName = getVariableName;
39
37
  function defaultValueConstruct(name, value) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vkontakte/vkui-tokens",
3
- "version": "4.27.0",
3
+ "version": "4.28.0",
4
4
  "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
5
5
  "license": "MIT",
6
6
  "main": "utils/descriptions.js",
@@ -32,7 +32,7 @@
32
32
  "csstype": "^3.1.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@babel/core": "7.20.5",
35
+ "@babel/core": "7.20.12",
36
36
  "@svgr/webpack": "6.5.1",
37
37
  "@types/color": "3.0.3",
38
38
  "@types/common-tags": "1.8.1",
@@ -45,6 +45,7 @@
45
45
  "@typescript-eslint/parser": "4.33.0",
46
46
  "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.51.4",
47
47
  "@vkontakte/icons": "2.3.0",
48
+ "@vkontakte/prettier-config": "0.1.0",
48
49
  "@vkontakte/vk-bridge": "2.7.2",
49
50
  "@vkontakte/vkui": "4.40.0",
50
51
  "babel-jest": "29.3.1",
@@ -83,7 +84,7 @@
83
84
  "ts-node": "10.9.1",
84
85
  "tsconfig-paths": "4.1.1",
85
86
  "tscpaths": "0.0.9",
86
- "type-fest": "3.4.0",
87
+ "type-fest": "3.5.3",
87
88
  "typescript": "4.9.4",
88
89
  "webpack": "5.75.0",
89
90
  "webpack-cli": "5.0.1",