@vkontakte/vkui-tokens 4.0.0 → 4.1.0

package/README.md

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

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

@@ -32,4 +32,6 @@ export interface Sizes {
     sizeBadgeM: number;
     sizeBadgeL: number;
     sizeBadgeXL: number;
+    sizeCardgridPadding: number;
+    sizeCardBorderRadius: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",

package/themeDescriptions/base/paradigm.js

@@ -407,6 +407,12 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     }, sizeBadgeXL: {
         regular: 56,
     }, 
+    // Токены компонента Cardscroll
+    sizeCardgridPadding: {
+        regular: 12,
+    }, sizeCardBorderRadius: {
+        regular: 16,
+    }, 
     // Прочие отступы
     elevation1: '0 2px 0 0 rgba(0, 16, 61, 0.04)', elevation2: '0 4px 32px 0 rgba(0, 16, 61, 0.32)', elevation3: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', elevation4: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.48, opacityDisableAccessibility: 0.64 });
 var x05 = common_1.helpers.x05, x1 = common_1.helpers.x1, x2 = common_1.helpers.x2, x3 = common_1.helpers.x3, x4 = common_1.helpers.x4, x5 = common_1.helpers.x5, x6 = common_1.helpers.x6, x8 = common_1.helpers.x8, x10 = common_1.helpers.x10;

package/themeDescriptions/base/vk.js

@@ -23,10 +23,16 @@ var fontWeightBase3 = 600;
 exports.lightColors = {
     colorsScheme: 'light',
     colors: {
-        // Background
-        colorBackgroundAccent: '#3F8AE0',
-        colorBackgroundAccentThemed: '#3F8AE0',
-        colorBackgroundAccentAlternative: '#3F8AE0',
+        colorBackgroundAccent: '#2688EB',
+        colorBackgroundAccentThemed: '#2688EB',
+        colorBackgroundAccentAlternative: '#2688EB',
+        colorIconAccent: '#2688EB',
+        colorTextAccent: '#2688EB',
+        colorTextAccentThemed: '#2688EB',
+        colorStrokeAccent: '#2688EB',
+        colorStrokeAccentThemed: '#2688EB',
+        colorStrokeContrast: '#FFFFFF',
+        colorActionSheetText: '#3F8AE0',
         colorBackgroundContent: '#FFFFFF',
         colorBackgroundSecondary: '#F5F5F5',
         colorBackgroundSecondaryAlpha: {
@@ -40,29 +46,12 @@ exports.lightColors = {
         colorBackgroundContrastSecondaryAlpha: 'rgba(255, 255, 255, 0.20)',
         colorBackgroundWarning: '#FFF2D6',
         colorBackgroundNegative: '#E64646',
-        colorBackgroundModal: '#FFFFFF',
-        colorBackgroundPositive: '#4BB34B',
         colorBackgroundNegativeTint: '#FAEBEB',
-        // Text
-        colorTextAccent: '#3F8AE0',
-        colorTextAccentThemed: '#3F8AE0',
         colorTextNegative: '#E64646',
-        colorTextLink: '#4986CC',
-        colorTextLinkThemed: '#4986CC',
-        colorTextMuted: '#2C2D2E',
-        colorTextPrimary: '#000000',
-        colorTextPrimaryInvariably: '#000000',
-        colorTextSecondary: '#818C99',
-        colorTextSubhead: '#6D7885',
-        colorTextTertiary: '#99A2AD',
-        colorTextLinkVisited: '#4986CC',
-        colorTextContrast: '#FFFFFF',
-        colorTextContrastThemed: '#FFFFFF',
-        colorLinkContrast: '#FFFFFF',
-        colorTextPositive: '#4BB34B',
-        // Icons
-        colorIconAccent: '#3F8AE0',
         colorIconNegative: '#E64646',
+        colorStrokeNegative: '#E64646',
+        colorHeaderBackground: '#FFFFFF',
+        colorPanelHeaderIcon: '#2688EB',
         colorIconPrimary: '#2C2D2E',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#818C99',
@@ -71,21 +60,28 @@ exports.lightColors = {
         colorIconSecondaryAlpha: 'rgba(0, 0, 0, 0.36)',
         colorIconTertiary: '#B8C1CC',
         colorIconTertiaryAlpha: 'rgba(0, 0, 0, 0.24)',
-        colorIconContrast: '#FFFFFF',
-        colorIconContrastThemed: '#FFFFFF',
-        colorIconPositive: '#4BB34B',
-        // Stroke
-        colorStrokeAccent: '#3F8AE0',
-        colorStrokeAccentThemed: '#3F8AE0',
-        colorStrokeContrast: '#FFFFFF',
-        colorStrokeNegative: '#E64646',
         colorImageBorderAlpha: 'rgba(0, 0, 0, 0.08)',
+        colorWriteBarInputBackground: '#F2F3F5',
+        colorWriteBarInputBorderAlpha: 'rgba(0, 0, 0, 0.08)',
+        colorTrackBackground: '#E1E3E6',
+        colorTrackBuffer: '#A0BFE4',
+        colorBackgroundModal: '#FFFFFF',
+        colorImagePlaceholderAlpha: 'rgba(0, 28, 61, 0.08)',
+        colorImagePlaceholder: '#F2F3F5',
+        colorSearchFieldBackground: '#EBEDF0',
         colorFieldBorderAlpha: 'rgba(0, 0, 0, 0.12)',
         colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.12)',
         colorSeparatorSecondary: '#E1E3E6',
         colorSeparatorPrimary: '#D7D8D9',
-        colorStrokePositive: '#4BB34B',
-        // Palette
+        colorTextLink: '#2D81E0',
+        colorTextLinkThemed: '#4986CC',
+        colorTextMuted: '#2C2D2E',
+        colorTextPrimary: '#000000',
+        colorTextPrimaryInvariably: '#000000',
+        colorTextSecondary: '#818C99',
+        colorTextSubhead: '#6D7885',
+        colorTextTertiary: '#99A2AD',
+        colorWriteBarIcon: '#3F8AE0',
         colorAccentBlue: '#3F8AE0',
         colorAccentGray: '#A3ADB8',
         colorAccentRed: '#FF3347',
@@ -93,21 +89,19 @@ exports.lightColors = {
         colorAccentOrange: '#FFA000',
         colorAccentPurple: '#735CE6',
         colorAccentViolet: '#792EC0',
-        colorAccentSecondary: '#3F8AE0',
-        // Other
-        colorActionSheetText: '#3F8AE0',
-        colorHeaderBackground: '#FFFFFF',
-        colorPanelHeaderIcon: '#3F8AE0',
-        colorWriteBarInputBackground: '#F2F3F5',
-        colorWriteBarInputBorderAlpha: 'rgba(0, 0, 0, 0.08)',
-        colorTrackBackground: '#E1E3E6',
-        colorTrackBuffer: '#A0BFE4',
-        colorImagePlaceholderAlpha: 'rgba(0, 28, 61, 0.08)',
-        colorImagePlaceholder: '#F2F3F5',
-        colorSearchFieldBackground: '#EBEDF0',
-        colorWriteBarIcon: '#3F8AE0',
         colorSkeletonFrom: '#F5F5F5',
         colorSkeletonTo: '#E1E3E6',
+        colorAccentSecondary: '#3F8AE0',
+        colorTextLinkVisited: '#4986CC',
+        colorTextContrast: '#FFFFFF',
+        colorTextContrastThemed: '#FFFFFF',
+        colorIconContrast: '#FFFFFF',
+        colorIconContrastThemed: '#FFFFFF',
+        colorLinkContrast: '#FFFFFF',
+        colorTextPositive: '#4BB34B',
+        colorBackgroundPositive: '#4BB34B',
+        colorIconPositive: '#4BB34B',
+        colorStrokePositive: '#4BB34B',
         colorAvatarOverlay: 'rgba(129, 140, 153, 0.48)',
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.4)',
         colorTransparent: 'transparent',
@@ -116,10 +110,16 @@ exports.lightColors = {
 exports.darkColors = {
     colorsScheme: 'dark',
     colors: {
-        // Background
-        colorBackgroundAccent: '#71AAEB',
+        colorBackgroundAccent: '#529EF4',
         colorBackgroundAccentThemed: '#FFFFFF',
-        colorBackgroundAccentAlternative: '#71AAEB',
+        colorBackgroundAccentAlternative: '#529EF4',
+        colorIconAccent: '#529EF4',
+        colorTextAccent: '#529EF4',
+        colorTextAccentThemed: '#FFFFFF',
+        colorStrokeAccent: '#529EF4',
+        colorStrokeAccentThemed: '#FFFFFF',
+        colorStrokeContrast: '#FFFFFF',
+        colorActionSheetText: '#529EF4',
         colorBackgroundContent: '#19191A',
         colorBackgroundSecondary: '#232324',
         colorBackgroundSecondaryAlpha: {
@@ -133,29 +133,12 @@ exports.darkColors = {
         colorBackgroundContrastSecondaryAlpha: 'rgba(255, 255, 255, 0.20)',
         colorBackgroundWarning: '#6C4A00',
         colorBackgroundNegative: '#E64646',
-        colorBackgroundModal: '#2D2D2E',
-        colorBackgroundPositive: '#4BB34B',
-        colorBackgroundNegativeTint: '#522e2e',
-        // Text
-        colorTextAccent: '#71AAEB',
-        colorTextAccentThemed: '#FFFFFF',
+        colorBackgroundNegativeTint: '#522E2E',
         colorTextNegative: '#E64646',
-        colorTextLink: '#71AAEB',
-        colorTextLinkThemed: '#FFFFFF',
-        colorTextMuted: '#E1E3E6',
-        colorTextPrimary: '#E1E3E6',
-        colorTextPrimaryInvariably: '#000000',
-        colorTextSecondary: '#76787A',
-        colorTextSubhead: '#C1C3C6',
-        colorTextTertiary: '#636567',
-        colorTextLinkVisited: '#4986CC',
-        colorTextContrast: '#FFFFFF',
-        colorTextContrastThemed: '#000000',
-        colorLinkContrast: '#FFFFFF',
-        colorTextPositive: '#4BB34B',
-        // Icons
-        colorIconAccent: '#71AAEB',
         colorIconNegative: '#E64646',
+        colorStrokeNegative: '#E64646',
+        colorHeaderBackground: '#19191A',
+        colorPanelHeaderIcon: '#71AAEB',
         colorIconPrimary: '#E1E3E6',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#B0B1B6',
@@ -164,22 +147,29 @@ exports.darkColors = {
         colorIconSecondaryAlpha: 'rgba(0, 0, 0, 0.43)',
         colorIconTertiary: '#5D5F61',
         colorIconTertiaryAlpha: 'rgba(255, 255, 255, 0.3)',
-        colorIconContrast: '#FFFFFF',
-        colorIconContrastThemed: '#000000',
-        colorIconPositive: '#4BB34B',
-        // Stroke
-        colorStrokeAccent: '#71AAEB',
-        colorStrokeAccentThemed: '#FFFFFF',
-        colorStrokeContrast: '#FFFFFF',
-        colorStrokeNegative: '#E64646',
         colorImageBorderAlpha: 'rgba(255, 255, 255, 0.08)',
+        colorWriteBarInputBackground: '#232324',
+        colorWriteBarInputBorderAlpha: 'rgba(255, 255, 255, 0.8)',
+        colorTrackBackground: '#202021',
+        colorTrackBuffer: '#405772',
+        colorBackgroundModal: '#2D2D2E',
+        colorImagePlaceholderAlpha: 'rgba(241, 247, 255, 0.08)',
+        colorImagePlaceholder: '#2A2B2C',
+        colorSearchFieldBackground: '#232324',
         colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.12)',
         colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.4)',
         colorSeparatorSecondary: '#141415',
         colorSeparatorPrimary: '#0F0F10',
-        colorStrokePositive: '#4BB34B',
-        // Palette
-        colorAccentBlue: '#71AAEB',
+        colorTextLink: '#529EF4',
+        colorTextLinkThemed: '#FFFFFF',
+        colorTextMuted: '#E1E3E6',
+        colorTextPrimary: '#E1E3E6',
+        colorTextPrimaryInvariably: '#000000',
+        colorTextSecondary: '#76787A',
+        colorTextSubhead: '#C1C3C6',
+        colorTextTertiary: '#636567',
+        colorWriteBarIcon: '#529EF4',
+        colorAccentBlue: '#529EF4',
         // цвета ниже нужно поменять
         // не успел сделать к релизу тёмной версии vk почты
         colorAccentGray: '#A3ADB8',
@@ -188,21 +178,19 @@ exports.darkColors = {
         colorAccentOrange: '#FFA000',
         colorAccentPurple: '#735CE6',
         colorAccentViolet: '#792EC0',
-        colorAccentSecondary: '#3F8AE0',
-        // Other
-        colorActionSheetText: '#71AAEB',
-        colorHeaderBackground: '#19191A',
-        colorPanelHeaderIcon: '#71AAEB',
-        colorWriteBarInputBackground: '#232324',
-        colorWriteBarInputBorderAlpha: 'rgba(255, 255, 255, 0.8)',
-        colorTrackBackground: '#202021',
-        colorTrackBuffer: '#405772',
-        colorImagePlaceholderAlpha: 'rgba(241, 247, 255, 0.08)',
-        colorImagePlaceholder: '#2A2B2C',
-        colorSearchFieldBackground: '#232324',
-        colorWriteBarIcon: '#76787A',
         colorSkeletonFrom: '#F5F5F5',
         colorSkeletonTo: '#E1E3E6',
+        colorAccentSecondary: '#3F8AE0',
+        colorTextLinkVisited: '#4986CC',
+        colorTextContrast: '#FFFFFF',
+        colorTextContrastThemed: '#000000',
+        colorIconContrast: '#FFFFFF',
+        colorIconContrastThemed: '#000000',
+        colorLinkContrast: '#FFFFFF',
+        colorTextPositive: '#4BB34B',
+        colorBackgroundPositive: '#4BB34B',
+        colorIconPositive: '#4BB34B',
+        colorStrokePositive: '#4BB34B',
         colorAvatarOverlay: 'rgba(129, 140, 153, 0.48)',
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.4)',
         colorTransparent: 'transparent',
@@ -414,6 +402,12 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase' }, exports.lightCol
     }, sizeBadgeXL: {
         regular: 56,
     }, 
+    // Токены компонента Cardscroll
+    sizeCardgridPadding: {
+        regular: 8,
+    }, sizeCardBorderRadius: {
+        regular: 8,
+    }, 
     // Прочие отступы
     elevation1: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)', elevation2: '0px 0px 2px rgba(0, 0, 0, 0.04), 0px 4px 4px rgba(0, 0, 0, 0.08)', elevation3: '0px 0px 4px rgba(0, 0, 0, 0.08), 0px 8px 8px rgba(0, 0, 0, 0.16)', elevation4: '0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)', animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.4, opacityDisableAccessibility: 0.64 });
 exports.darkTheme = __assign(__assign(__assign({}, exports.lightTheme), exports.darkColors), { themeName: 'vkBaseDark', colorsScheme: 'dark', 

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

@@ -119,6 +119,8 @@
 	--vkui--size_badge_m--regular: 24px;
 	--vkui--size_badge_l--regular: 44px;
 	--vkui--size_badge_x_l--regular: 56px;
+	--vkui--size_cardgrid_padding--regular: 12px;
+	--vkui--size_card_border_radius--regular: 16px;
 	--vkui--elevation1: none;
 	--vkui--elevation2: none;
 	--vkui--elevation3: 0px 4px 32px rgba(0, 16, 61, 0.32);
@@ -1060,6 +1062,8 @@
 	--vkui--size_badge_m: 24px;
 	--vkui--size_badge_l: 44px;
 	--vkui--size_badge_x_l: 56px;
+	--vkui--size_cardgrid_padding: 12px;
+	--vkui--size_card_border_radius: 16px;
 	--vkui--font_h0--font_size: 32px;
 	--vkui--font_h0--line_height: 40px;
 	--vkui--font_h0--font_weight: 500;

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

@@ -96,6 +96,8 @@
 	--vkui--size_badge_m: 24px;
 	--vkui--size_badge_l: 44px;
 	--vkui--size_badge_x_l: 56px;
+	--vkui--size_cardgrid_padding: 12px;
+	--vkui--size_card_border_radius: 16px;
 	--vkui--font_h0--font_size: 32px;
 	--vkui--font_h0--line_height: 40px;
 	--vkui--font_h0--font_weight: 500;

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

@@ -119,6 +119,8 @@
 	--vkui--size_badge_m--regular: 24px;
 	--vkui--size_badge_l--regular: 44px;
 	--vkui--size_badge_x_l--regular: 56px;
+	--vkui--size_cardgrid_padding--regular: 12px;
+	--vkui--size_card_border_radius--regular: 16px;
 	--vkui--elevation1: none;
 	--vkui--elevation2: none;
 	--vkui--elevation3: 0px 4px 32px rgba(0, 16, 61, 0.32);