@vkontakte/vkui-tokens 4.46.0 → 4.47.0

package/README.md

@@ -7,8 +7,7 @@
 
 **[Интерактивная документация](https://vkcom.github.io/vkui-tokens/)**
 
-Этот репозиторий содержит токены единой дизайн-системы VKUI и
-их значения для тем оформления различных проектов.
+Этот репозиторий содержит токены единой дизайн-системы VKUI и их значения для тем оформления различных проектов.
 
 Темы собираются в следующие форматы: `css`, `scss`, `less`, `pcss`, `styl`, `js`, `json`.
 
@@ -57,7 +56,7 @@ npm i --save @vkontakte/vkui-tokens@latest
 
 ```postcss
 .class:hover {
-	background-color: var(--vkui--color_background--hover);
+  background-color: var(--vkui--color_background--hover);
 }
 ```
 
@@ -108,114 +107,162 @@ import baseTheme from '@vkontakte/vkui-tokens/themes/vkBase';
 @import '~@vkontakte/vkui-tokens/themes/vkBase/index';
 
 .myAwesomeClass {
-	background-color: $color-bg;
+  background-color: $color-bg;
 }
 
 .myAwesomeClass:hover {
-	background-color: $color-bg--hover;
+  background-color: $color-bg--hover;
 }
 ```
 
 ### Используем pcss формат темы из пакета
 
-1.  Заходим в файл, где хотим использовать тему, и импортируем её:
+1. Заходим в файл, где хотим использовать тему, и импортируем её:
 
-        @import "@vkontakte/vkui-tokens/themes/vkBase";
+   ```css
+   @import '@vkontakte/vkui-tokens/themes/vkBase';
+   ```
 
-2.  Заходим в файл темы, смотрим какие там есть переменные и юзаем их, например:
+2. Заходим в файл темы, смотрим какие там есть переменные и используем их, например:
 
-        width: var(--size-content-block-width);
+   ```css
+   width: var(--size-content-block-width);
+   ```
 
-3.  Просто так ничего не заработает, нужно поставить postcss:
+3. Просто так ничего не заработает, нужно поставить postcss:
 
-         npm i --save-dev postcss
+   ```bash
+   npm i --save-dev postcss
+   ```
 
-    Для запуска у postcss есть командная строка, которую тоже надо установить:
+   Для запуска у postcss есть командная строка, которую тоже надо установить:
 
-         npm i --save-dev postcss-cli
+   ```bash
+   npm i --save-dev postcss-cli
+   ```
 
-4.  Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:
+4. Создаем конфиг postcss. Для этого создаем файл postcss.config.js (можно в любом месте проекта, но лучше в корне) и пишем в него необходимые плагины:
 
-    ```javascript
-    const postcssPresetEnv = require('postcss-preset-env');
+   ```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'),
-    	],
-    };
-    ```
+   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 и др.), чтобы понять, что вам необходимо.
+   Возможно, вам не понадобятся все эти плагины, поэтому лучше почитать, что делает каждый из них (https://www.postcss.parts/).
+   Нужно посмотреть файл вашей темы и ваш css (scss и др.), чтобы понять, что вам необходимо.
 
-5.  Устанавливаем все необходимые плагины, которые написали в конфиге, например:
+5. Устанавливаем все необходимые плагины, которые написали в конфиге, например:
 
-        npm i --save-dev postcss-import
+   ```bash
+   npm i --save-dev postcss-import
+   ```
 
-6.  Настраиваем сборку postcss.
+6. Настраиваем сборку postcss.
 
-    Сборка производится командой postcss через командную строку с необходимым параметрами.
-    Про них подробнее тут https://github.com/postcss/postcss-cli
+   Сборка производится командой postcss через командную строку с необходимым параметрами.
+   Про них подробнее тут https://github.com/postcss/postcss-cli
 
-    Пример команды:
+   Пример команды:
 
-         postcss src/main.css -c ./ --dir public
+   ```bash
+   postcss src/main.css -c ./ --dir public
+   ```
 
-    Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.
+   Такая команда прогонит файл src/main.css с помощью конфига из текущей папки и положит результат в папку public.
 
 # Инструменты
 
 ## Локальная сборка своих тем инструментами библиотеки
 
-Библиотека предоставляет интерфейсы и темы, от которых можно
-наследоваться.
+Библиотека предоставляет интерфейсы и темы, от которых можно наследоваться, и набор функций, которые позволяют собрать собственную тему в нужном формате.
 
-Помимо этого, библиотека предоставляет набор функций, которые позволяют
-собрать собственную тему в нужном формате.
+Сборка темы подразумевает раскрытие наследования, генерацию цветов состояний (hover, active), округление и "пикселизация" значений и т.д.
 
-Сборка темы подразумевает раскрытие наследования, генерацию цветов
-состояний (hover, active), округление и "пикселизация" значений и т.д.
+## Предварительная настройка
+
+Инструменты адаптированы для запуска в `Node`-среде, и не подходят для генерации темы в рантайме (в браузерной среде).
+Вам необходимо установить следующие пакеты для корректной работы скриптов генерации:
+
+```bash
+npm i --save-dev color common-tags css.escape
+```
 
 ### Наследование от существующей темы
 
-Пример:
+Например, возьмем базовые темы (светлую и темную) и добавим к ним новый токен и переопределим один существующий.
+Для этого нам нужно исполнить следующий скрипт:
 
 ```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 {
+  lightTheme as baseTheme,
+  darkTheme,
+} from '@vkontakte/vkui-tokens/themeDescriptions/base/vk.js';
 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>;
+  myNewAwesomeToken: Adaptive<number>;
 }
 
 const myNewAwesomeTheme: MyNewAwesomeThemeDescription = {
-	...baseTheme,
-	myNewAwesomeToken: {
-		regular: 20,
-		compact: 12,
-	},
+  ...baseTheme,
+  // Название темы
+  themeName: 'myAwesomeTheme',
+  // Базовая часть названия темы (используется для генерации локального селектора, например: .vkui--myAwesomeTheme--light)
+  themeNameBase: 'myAwesomeTheme',
+  // Тема, от которой наследуются переменные, носит информационный характер
+  themeInheritsFrom: 'vkBase',
+  // Новый адаптивный токен
+  myNewAwesomeToken: {
+    regular: 20,
+    compact: 12,
+  },
+  colors: {
+    // Сохраняем остальные значения из темы
+    ...baseTheme.colors,
+    // Переопределяем необходимую переменную
+    colorTextAccentThemed: '#ff0000',
+  },
 };
 
-// получаем разные типы тем на основе описания
+const myNewAwesomeThemeDark: MyNewAwesomeThemeDescription = {
+  ...myNewAwesomeTheme,
+  ...darkTheme,
+  themeName: 'myAwesomeThemeDark',
+  themeNameBase: 'myAwesomeTheme',
+  themeInheritsFrom: 'vkBaseDark',
+  colors: {
+    ...darkTheme.colors,
+    colorTextAccentThemed: '#00ff00',
+  },
+};
+
+// Получаем разные типы тем на основе описания
 const { theme, pixelifyTheme, cssVarsTheme } = expandAll(myNewAwesomeTheme);
+const { pixelifyTheme: pixelifyThemeDark } = expandAll(myNewAwesomeThemeDark);
 
-// получаем CSS-строку со всеми переменными темы,
-// которую можно вставить в DOM или сохранить в файл
+// Для использования, например, в вебе вам подойдет компиляция "пикселяризованной" темы в формате '.css':
 const cssString = compileStyles('css', pixelifyTheme);
+const cssStringDark = compileStyles('css', pixelifyThemeDark);
+
+// Полученные CSS-строки со всеми переменными тем можно вставить в DOM или сохранить в файл
 ```
 
 # Roadmap

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

@@ -107,15 +107,20 @@ export interface ColorsDescriptionStruct {
      */
     colorBackgroundModalInverse: ColorDescription;
     /**
-     * @desc Цвет фона предупреждающих элементов
+     * @desc Фон для использования в позитивных сценариях работы
      * @tags color, background
      */
-    colorBackgroundWarning: ColorDescription;
+    colorBackgroundPositive: ColorDescription;
     /**
-     * @desc Фон для использования в позитивных сценариях работы
+     * @desc Тонированный фон для использования в позитивных сценариях работы
      * @tags color, background
      */
-    colorBackgroundPositive: ColorDescription;
+    colorBackgroundPositiveTint: ColorDescription;
+    /**
+     * @desc Цвет фона предупреждающих элементов
+     * @tags color, background
+     */
+    colorBackgroundWarning: ColorDescription;
     /**
      * @desc Фон для ошибок и использования в негативных сценариях работы
      * @tags color, background
@@ -127,10 +132,10 @@ export interface ColorsDescriptionStruct {
      */
     colorBackgroundNegativeTint: ColorDescription;
     /**
-     * @desc Тонированный фон для использования в позитивных сценариях работы
+     * @desc Тонированный фон для важной информации в нейтральных сценариях работы
      * @tags color, background
      */
-    colorBackgroundPositiveTint: ColorDescription;
+    colorBackgroundInfoTint: ColorDescription;
     /**
      * @desc Фон для полей ввода, селектов и других подобных компонентов
      * @tags color, component, background

package/interfaces/themes/cloud/index.d.ts

@@ -1,7 +1,66 @@
-import { ThemeParadigmBase, ThemeParadigmBaseCssVars, ThemeParadigmBaseDescription } from '../paradigmBase';
-export interface ThemeCloud extends ThemeParadigmBase {
+import { Adaptive } from '../../general/tools';
+import { DefaultViewports } from '../../general/tools/viewports';
+import { Font } from '../../general/typography';
+import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
+interface ThemeCloudTypohraphy {
+    /**
+     * @desc Caption 1 CAPS • DEMIBOLD
+     * @tags font
+     * */
+    fontCaption1CapsDemibold: {
+        regular: Font;
+    };
+    /**
+     * @desc Caption 2 CAPS • DEMIBOLD
+     * @tags font
+     * */
+    fontCaption2CapsDemibold: {
+        regular: Font;
+    };
+    /**
+     * @desc Caption 3 CAPS • DEMIBOLD
+     * @tags font
+     * */
+    fontCaption3CapsDemibold: {
+        regular: Font;
+    };
+    /**
+     * @desc Заголовок Title 2 • Custom
+     * @tags font
+     * */
+    fontTitle2Custom: Adaptive<Font>;
+    /**
+     * @desc Заголовок Title3 • Custom
+     * @tags font
+     * */
+    fontTitle3Custom: Adaptive<Font>;
+    /**
+     * @desc Заголовок Subtitle • Medium
+     * @tags font
+     * */
+    fontSubtitleMedium: Font;
+    /**
+     * @desc Заголовок Subtitle • Regular
+     * @tags font
+     * */
+    fontSubtitleCustom: Font;
+    /**
+     * @desc Заголовок HeadlineLarge• Medium.
+     * Используется для обозначения занятого места в блоке с чистилкой
+     * @tags font
+     * */
+    fontHeadlineLargeMedium: Font;
+    /**
+     * @desc LargeText • Regular.
+     * Используется как текст под заголовком в тултипах
+     * @tags font
+     * */
+    fontLargeText: Font;
 }
-export interface ThemeCloudDescription extends ThemeParadigmBaseDescription {
+export interface ThemeCloud extends ParadigmTheme, ThemeCloudTypohraphy {
 }
-export interface ThemeCloudCssVars extends ThemeParadigmBaseCssVars {
+export interface ThemeCloudDescription extends ParadigmThemeDescription, ThemeCloudTypohraphy {
 }
+export interface ThemeCloudCssVars extends ParadigmThemeCssVars<DefaultViewports, ThemeCloud> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.46.0",
+  "version": "4.47.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -48,16 +48,16 @@
     "@types/color": "3.0.6",
     "@types/common-tags": "1.8.4",
     "@types/fs-extra": "11.0.4",
-    "@types/lodash": "4.17.1",
+    "@types/lodash": "4.17.5",
     "@types/node": "18.11.10",
-    "@types/react": "18.3.2",
+    "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.2.0",
     "@vkontakte/icons": "2.114.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.14.1",
     "@vkontakte/vkjs": "1.1.2",
-    "@vkontakte/vkui": "6.0.2",
+    "@vkontakte/vkui": "6.1.1",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "clean-webpack-plugin": "4.0.0",
@@ -84,15 +84,15 @@
     "husky": "9.0.11",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
-    "lint-staged": "15.2.2",
+    "lint-staged": "15.2.7",
     "lodash": "4.17.21",
     "prettier": "3.2.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rimraf": "5.0.5",
+    "rimraf": "5.0.7",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
-    "ts-jest": "29.1.2",
+    "ts-jest": "29.1.4",
     "ts-loader": "9.5.1",
     "ts-morph": "20.0.0",
     "ts-node": "10.9.2",

package/themeDescriptions/base/paradigm.js

@@ -67,6 +67,7 @@ exports.lightColors = {
         colorBackgroundContrastInverse: '#303030',
         colorBackgroundContrastThemed: '#FFFFFF',
         colorBackgroundAccentTint: '#5a9eff',
+        colorBackgroundInfoTint: '#f0f4ff',
         // Text
         colorTextAccent: '#005FF9',
         colorTextAccentThemed: '#005FF9',
@@ -193,6 +194,7 @@ exports.darkColors = {
         colorBackgroundContrastInverse: '#303030',
         colorBackgroundContrastThemed: '#303030',
         colorBackgroundAccentTint: '#5a9eff',
+        colorBackgroundInfoTint: '#19202f',
         // Text
         colorTextAccent: '#3C82FD',
         colorTextAccentThemed: '#FFFFFF',

package/themeDescriptions/base/vk.js

@@ -91,19 +91,23 @@ var colorFromFigma = function (colorsScheme) {
             }[colorsScheme],
             colorBackgroundModal: background.background_modal,
             colorBackgroundModalInverse: background.background_modal_inverse,
+            colorBackgroundPositive: background.background_positive,
+            colorBackgroundPositiveTint: {
+                light: '#E8F9E8',
+                dark: '#2E3E2B',
+            }[colorsScheme],
             colorBackgroundWarning: {
                 light: '#FFF2D6',
-                dark: '#5B4D35',
+                dark: '#473315',
             }[colorsScheme],
-            colorBackgroundPositive: background.background_positive,
             colorBackgroundNegative: background.background_negative,
             colorBackgroundNegativeTint: {
                 light: '#FFE9E9',
                 dark: '#522E2E',
             }[colorsScheme],
-            colorBackgroundPositiveTint: {
-                light: '#E8F9E8',
-                dark: '#2E3E2B',
+            colorBackgroundInfoTint: {
+                light: '#DEEEFF',
+                dark: '#1C3954',
             }[colorsScheme],
             colorFieldBackground: background.field_background,
             colorHeaderBackground: background.header_background,
@@ -133,7 +137,10 @@ var colorFromFigma = function (colorsScheme) {
             colorIconMedium: icons.icon_medium,
             colorIconMediumAlpha: icons.icon_medium_alpha,
             colorIconSecondary: icons.icon_secondary,
-            colorIconSecondaryAlpha: icons.icon_secondary_alpha,
+            colorIconSecondaryAlpha: {
+                light: 'rgba(0, 0, 0, 0.36)',
+                dark: 'rgba(241, 247, 255, 0.43)',
+            }[colorsScheme],
             colorIconTertiary: icons.icon_tertiary,
             colorIconTertiaryAlpha: icons.icon_tertiary_alpha,
             colorIconContrast: icons.icon_contrast,
@@ -141,8 +148,8 @@ var colorFromFigma = function (colorsScheme) {
             colorIconContrastSecondary: icons.icon_contrast_secondary,
             colorIconPositive: icons.icon_positive,
             colorIconWarning: {
-                light: '#E1B406',
-                dark: '#DBAF06',
+                light: '#F8A01C',
+                dark: '#EDB055',
             }[colorsScheme],
             colorIconNegative: icons.icon_negative,
             // Stroke

package/themes/calendar/cssVars/declarations/index.css

@@ -484,6 +484,9 @@
 	--vkui--color_background_accent_tint: #5a9eff;
 	--vkui--color_background_accent_tint--hover: #5698F7;
 	--vkui--color_background_accent_tint--active: #5393EF;
+	--vkui--color_background_info_tint: #f0f4ff;
+	--vkui--color_background_info_tint--hover: #E6EBF7;
+	--vkui--color_background_info_tint--active: #DDE2EF;
 	--vkui--color_text_accent: #005FF9;
 	--vkui--color_text_accent--hover: #005CF1;
 	--vkui--color_text_accent--active: #0059EA;

package/themes/calendar/cssVars/declarations/noSizes.css

@@ -111,6 +111,9 @@
 	--vkui--color_background_accent_tint: #5a9eff;
 	--vkui--color_background_accent_tint--hover: #5698F7;
 	--vkui--color_background_accent_tint--active: #5393EF;
+	--vkui--color_background_info_tint: #f0f4ff;
+	--vkui--color_background_info_tint--hover: #E6EBF7;
+	--vkui--color_background_info_tint--active: #DDE2EF;
 	--vkui--color_text_accent: #005FF9;
 	--vkui--color_text_accent--hover: #005CF1;
 	--vkui--color_text_accent--active: #0059EA;

package/themes/calendar/cssVars/declarations/onlyColors.css

@@ -68,6 +68,9 @@
 	--vkui--color_background_accent_tint: #5a9eff;
 	--vkui--color_background_accent_tint--hover: #5698F7;
 	--vkui--color_background_accent_tint--active: #5393EF;
+	--vkui--color_background_info_tint: #f0f4ff;
+	--vkui--color_background_info_tint--hover: #E6EBF7;
+	--vkui--color_background_info_tint--active: #DDE2EF;
 	--vkui--color_text_accent: #005FF9;
 	--vkui--color_text_accent--hover: #005CF1;
 	--vkui--color_text_accent--active: #0059EA;