@vkontakte/vkui-tokens 4.44.1-dev-cdf16b.0 → 4.45.0

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

@@ -371,6 +371,7 @@ export interface SpacingSizes {
     /**
      * @desc Стандартный токен размера 3xs для отступов
      * @tags size
+     * @deprecated
      */
     spacingSize3Xs: number;
     /**
@@ -408,4 +409,14 @@ export interface SpacingSizes {
      * @tags size
      */
     spacingSize2Xl: number;
+    /**
+     * @desc Стандартный токен размера 3xl для отступов
+     * @tags size
+     */
+    spacingSize3Xl: number;
+    /**
+     * @desc Стандартный токен размера 4xl для отступов
+     * @tags size
+     */
+    spacingSize4Xl: number;
 }

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

@@ -5,20 +5,72 @@ import { Font } from '../../general/typography';
 import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
 export type MediaViewportsTuple = ['touch', 'tablet', 'desktopS', 'desktopM'];
 interface ProjectColors {
+    /**
+     * @desc Акцентный цвет проекта auto.mail.ru
+     * @tags color
+     */
     colorPrimaryAuto: ColorWithStates;
+    /**
+     * @desc Основной акцентный цвет. Используют проекты news.mail.ru, sportmail.ru, pogoda.mail.ru
+     * @tags color
+     */
     colorPrimaryBase: ColorWithStates;
+    /**
+     * @desc Акцентный цвет проекта deti.mail.ru
+     * @tags color
+     */
     colorPrimaryDeti: ColorWithStates;
+    /**
+     * @desc Акцентный цвет проекта dobro.mail.ru
+     * @tags color
+     */
     colorPrimaryDobro: ColorWithStates;
+    /**
+     * @desc Акцентный цвет проекта health.mail.ru
+     * @tags color, lagacy
+     */
     colorPrimaryHealth: ColorWithStates;
+    /**
+     * @desc Альтернативный акцентный цвет проекта health.mail.ru
+     * @tags color, lagacy
+     */
     colorPrimaryHealthNew: ColorWithStates;
+    /**
+     * @desc Акцентный цвет проекта hi-tech.mail.ru
+     * @tags color
+     */
     colorPrimaryHitech: ColorWithStates;
+    /**
+     * @desc Акцентный цвет проекта kino.mail.ru
+     * @tags color
+     */
     colorPrimaryKino: ColorWithStates;
+    /**
+     * @desc Акцентный цвет проекта lady.mail.ru
+     * @tags color
+     */
     colorPrimaryLady: ColorWithStates;
     colorPrimaryMycom: ColorWithStates;
+    /**
+     * @desc Акцентный цвет проекта dom.mail.ru
+     * @tags color
+     */
     colorPrimaryRealty: ColorWithStates;
     colorPrimaryPharma: ColorWithStates;
+    /**
+     * @desc Акцентный цвет проекта pets.mail.ru
+     * @tags color
+     */
     colorPrimaryPets: ColorWithStates;
+    /**
+     * @desc Второстепенный акцентный цвет. Используют проекты news.mail.ru, sportmail.ru, pogoda.mail.ru
+     * @tags color
+     */
     colorSecondaryBase: ColorWithStates;
+    /**
+     * @desc Альтернативный акцентный цвет проекта health.mail.ru
+     * @tags color, lagacy
+     */
     colorSecondaryHealth: ColorWithStates;
     colorSecondaryMycom: ColorWithStates;
 }
@@ -38,34 +90,139 @@ type SocialColorsDescriptions = {
     [key in keyof SocialColors]: ColorDescription;
 };
 interface MediaUniqTokens {
-    mediaFontMediaHeader: Adaptive<Font>;
+    /**
+     * @desc Главный заголовок статьи или медиа-страницы
+     * @tags font
+     */
     mediaFontMediaTitle1: Adaptive<Font>;
+    /**
+     * @desc Уменьшенная версия главного заголовка
+     * @tags font
+     */
+    mediaFontMediaTitle1Tiny: Adaptive<Font>;
+    /**
+     * @desc Заголовок 2 уровня
+     * @tags font
+     */
     mediaFontMediaTitle2: Adaptive<Font>;
+    /**
+     * @desc Для 2 порядкового номера в нумерованном разделителе
+     * @tags font
+     */
+    mediaFontMediaTitle2Tiny: Adaptive<Font>;
+    /**
+     * @desc Заголовок 3 уровня
+     * @tags font
+     */
     mediaFontMediaTitle3: Adaptive<Font>;
+    /**
+     * @desc Заголовок 4 уровня
+     * @tags font
+     */
+    mediaFontMediaTitle4: Adaptive<Font>;
+    /**
+     * @desc Заголовок 5 уровня
+     * @tags font
+     */
+    mediaFontMediaTitle5: Adaptive<Font>;
+    /**
+     * @desc Заголовок 6 уровня
+     * @tags font
+     */
+    mediaFontMediaTitle6: Adaptive<Font>;
+    /**
+     * @desc Лид статьи
+     * @tags font
+     */
     mediaFontMediaLead: Adaptive<Font>;
+    /**
+     * @desc Цитаты, врезы в статьях, акценты текста на медиа-страницах
+     * @tags font
+     */
+    mediaFontMediaQuote: Adaptive<Font>;
+    /**
+     * @desc Автор цитаты
+     * @tags font
+     */
+    mediaFontMediaQuotePerson: Adaptive<Font>;
+    /**
+     * @desc Основной параграф наборного текст в статье по умолчанию
+     * @tags font
+     */
     mediaFontMediaParagraph: Adaptive<Font>;
+    /**
+     * @desc Используется только для выделения нумирации списков в статьях, чтобы списки выглядели акцентными
+     * @tags font
+     */
+    mediaFontMediaParagraphNumbering: Adaptive<Font>;
+    /**
+     * @desc Второстепенный параграф наборным текстом в статье по умолчанию
+     * @tags font
+     */
+    mediaFontMediaParagraphSecondary: Adaptive<Font>;
+    /**
+     * @desc Второстепенный не-наборный текст для поддержания визуальной иерархии
+     * @tags font
+     */
+    mediaFontMediaTextSecondaryLight: Adaptive<Font>;
+    /**
+     * @desc Подписи под изображениями, видео или другии блоками и врезами в статьях и на других медиа-страницах
+     * @tags font
+     */
+    mediaFontMediaCaption: Adaptive<Font>;
+    /**
+     * @desc Бейджи и отбивки “Продолжение после рекламы”
+     * @tags font
+     */
+    mediaFontMediaCaptionCaps: Adaptive<Font>;
+    /**
+     * @desc Семейство шрифтов статьи
+     * @tags font
+     */
     fontFamilyArticle: Property.FontFamily;
-    fontWeightArticle1: Property.FontWeight;
-    fontWeightArticle2: Property.FontWeight;
+    fontWeightMedia1: Property.FontWeight;
+    fontWeightMedia2: Property.FontWeight;
+    fontWeightMedia3: Property.FontWeight;
+    fontWeightMedia4: Property.FontWeight;
     fontH1: Adaptive<Font>;
     fontH2: Adaptive<Font>;
     fontH3: Adaptive<Font>;
     fontH4: Adaptive<Font>;
-    fontLead: Adaptive<Font>;
-    fontArticleBody: Adaptive<Font>;
-    fontSpecificText: Adaptive<Font>;
-    fontSpecificFootnote: Adaptive<Font>;
-    fontSpecificButton: Adaptive<Font>;
+    /**
+     * @desc Ширина колонки страницы
+     * @tags size, component
+     */
     gridWrapperContent: Adaptive<number | string>;
+    /**
+     * @desc Ширина основной колонки контента
+     * @tags size, component
+     */
     gridMainContent: Adaptive<number | string>;
+    /**
+     * @desc Ширина sidebar
+     * @tags size, component
+     */
     gridAsideContent: Adaptive<number | string>;
+    /**
+     * @desc
+     * @tags size, component
+     */
     gridColumnX2: Adaptive<string | number>;
+    /**
+     * @desc
+     * @tags size, component
+     */
     gridColumnX3: Adaptive<string | number>;
+    /**
+     * @desc
+     * @tags size, component
+     */
     gridColumnX4: Adaptive<string | number>;
+    /**
+     * @desc
+     * @tags size, component
+     */
     gridColumnX6: Adaptive<string | number>;
-    gridContent: Adaptive<number | string>;
-    gridLayoutArticle: Adaptive<string | number>;
-    gridLayoutBanner: Adaptive<string | number>;
 }
 export interface ThemeMedia extends ParadigmTheme<MediaViewportsTuple>, ProjectColors, SocialColors, MediaUniqTokens {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.44.1-dev-cdf16b.0",
+  "version": "4.45.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -43,21 +43,21 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.23.9",
+    "@babel/core": "7.24.4",
     "@svgr/webpack": "8.1.0",
     "@types/color": "3.0.6",
     "@types/common-tags": "1.8.4",
     "@types/fs-extra": "11.0.4",
-    "@types/lodash": "4.14.202",
+    "@types/lodash": "4.17.0",
     "@types/node": "18.11.10",
-    "@types/react": "18.2.55",
-    "@types/react-dom": "18.2.19",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.2.0",
     "@vkontakte/icons": "2.108.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.14.1",
-    "@vkontakte/vkjs": "1.1.1",
-    "@vkontakte/vkui": "6.0.0",
+    "@vkontakte/vkjs": "1.1.2",
+    "@vkontakte/vkui": "6.0.2",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "clean-webpack-plugin": "4.0.0",
@@ -98,7 +98,7 @@
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tscpaths": "0.0.9",
-    "type-fest": "4.10.2",
+    "type-fest": "4.16.0",
     "typescript": "5.2.2",
     "typescript-eslint": "7.0.1",
     "webpack": "5.91.0",

package/themeDescriptions/base/paradigm.js

@@ -632,7 +632,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         regular: 0.33,
     }, 
     // Стандартные токены для отступов
-    spacingSize3Xs: 2, spacingSize2Xs: 4, spacingSizeXs: 6, spacingSizeS: 8, spacingSizeM: 12, spacingSizeL: 16, spacingSizeXl: 20, spacingSize2Xl: 24, 
+    spacingSize3Xs: 2, spacingSize2Xs: 2, spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, spacingSize2Xl: 16, spacingSize3Xl: 20, spacingSize4Xl: 24, 
     // Прочие отступы
     elevation1: '0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)', elevation1InvertY: '0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)', elevation2: '0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)', elevation3: '0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)', elevation4: '0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)', gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4), gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryLight), gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', animationEasingPlatform: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.48, opacityDisableAccessibility: 0.64, zIndexModal: 99, zIndexPopout: 100 });
 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

@@ -619,7 +619,7 @@ exports.lightTheme = __assign(__assign(__assign(__assign(__assign({ themeName: '
         regular: 0.33,
     }, 
     // Стандартные токены для отступов
-    spacingSize3Xs: 2, spacingSize2Xs: 4, spacingSizeXs: 6, spacingSizeS: 8, spacingSizeM: 12, spacingSizeL: 16, spacingSizeXl: 20, spacingSize2Xl: 24, 
+    spacingSize3Xs: 2, spacingSize2Xs: 2, spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, spacingSize2Xl: 16, spacingSize3Xl: 20, spacingSize4Xl: 24, 
     // Разное
     animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', animationEasingPlatform: 'cubic-bezier(0.4, 0, 0.2, 1)', opacityDisable: 0.4, opacityDisableAccessibility: 0.64, zIndexModal: 99, zIndexPopout: 100 });
 exports.darkTheme = __assign(__assign(__assign(__assign(__assign({}, exports.lightTheme), exports.darkColors), exports.darkGradient), exports.darkElevation), { themeName: 'vkBaseDark', themeInheritsFrom: 'vkBase', colorsScheme: 'dark' });

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

@@ -255,13 +255,15 @@
 	--vkui--size_border2x--regular: 0.5px;
 	--vkui--size_border3x--regular: 0.33px;
 	--vkui--spacing_size_3xs: 2px;
-	--vkui--spacing_size_2xs: 4px;
-	--vkui--spacing_size_xs: 6px;
-	--vkui--spacing_size_s: 8px;
-	--vkui--spacing_size_m: 12px;
-	--vkui--spacing_size_l: 16px;
-	--vkui--spacing_size_xl: 20px;
-	--vkui--spacing_size_2xl: 24px;
+	--vkui--spacing_size_2xs: 2px;
+	--vkui--spacing_size_xs: 4px;
+	--vkui--spacing_size_s: 6px;
+	--vkui--spacing_size_m: 8px;
+	--vkui--spacing_size_l: 10px;
+	--vkui--spacing_size_xl: 12px;
+	--vkui--spacing_size_2xl: 16px;
+	--vkui--spacing_size_3xl: 20px;
+	--vkui--spacing_size_4xl: 24px;
 	--vkui--elevation1: 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation1_invert_y: 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation2: 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06);

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

@@ -255,13 +255,15 @@
 	--vkui--size_border2x--regular: 0.5px;
 	--vkui--size_border3x--regular: 0.33px;
 	--vkui--spacing_size_3xs: 2px;
-	--vkui--spacing_size_2xs: 4px;
-	--vkui--spacing_size_xs: 6px;
-	--vkui--spacing_size_s: 8px;
-	--vkui--spacing_size_m: 12px;
-	--vkui--spacing_size_l: 16px;
-	--vkui--spacing_size_xl: 20px;
-	--vkui--spacing_size_2xl: 24px;
+	--vkui--spacing_size_2xs: 2px;
+	--vkui--spacing_size_xs: 4px;
+	--vkui--spacing_size_s: 6px;
+	--vkui--spacing_size_m: 8px;
+	--vkui--spacing_size_l: 10px;
+	--vkui--spacing_size_xl: 12px;
+	--vkui--spacing_size_2xl: 16px;
+	--vkui--spacing_size_3xl: 20px;
+	--vkui--spacing_size_4xl: 24px;
 	--vkui--elevation1: 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation1_invert_y: 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation2: 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06);

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

@@ -1,13 +1,15 @@
 :root {
 	--vkui--theme_name: 'calendar';
 	--vkui--spacing_size_3xs: 2px;
-	--vkui--spacing_size_2xs: 4px;
-	--vkui--spacing_size_xs: 6px;
-	--vkui--spacing_size_s: 8px;
-	--vkui--spacing_size_m: 12px;
-	--vkui--spacing_size_l: 16px;
-	--vkui--spacing_size_xl: 20px;
-	--vkui--spacing_size_2xl: 24px;
+	--vkui--spacing_size_2xs: 2px;
+	--vkui--spacing_size_xs: 4px;
+	--vkui--spacing_size_s: 6px;
+	--vkui--spacing_size_m: 8px;
+	--vkui--spacing_size_l: 10px;
+	--vkui--spacing_size_xl: 12px;
+	--vkui--spacing_size_2xl: 16px;
+	--vkui--spacing_size_3xl: 20px;
+	--vkui--spacing_size_4xl: 24px;
 	--vkui--elevation1: 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation1_invert_y: 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation2: 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06);

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

@@ -255,13 +255,15 @@
 	--vkui--size_border2x--regular: 0.5px;
 	--vkui--size_border3x--regular: 0.33px;
 	--vkui--spacing_size_3xs: 2px;
-	--vkui--spacing_size_2xs: 4px;
-	--vkui--spacing_size_xs: 6px;
-	--vkui--spacing_size_s: 8px;
-	--vkui--spacing_size_m: 12px;
-	--vkui--spacing_size_l: 16px;
-	--vkui--spacing_size_xl: 20px;
-	--vkui--spacing_size_2xl: 24px;
+	--vkui--spacing_size_2xs: 2px;
+	--vkui--spacing_size_xs: 4px;
+	--vkui--spacing_size_s: 6px;
+	--vkui--spacing_size_m: 8px;
+	--vkui--spacing_size_l: 10px;
+	--vkui--spacing_size_xl: 12px;
+	--vkui--spacing_size_2xl: 16px;
+	--vkui--spacing_size_3xl: 20px;
+	--vkui--spacing_size_4xl: 24px;
 	--vkui--elevation1: 0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation1_invert_y: 0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08);
 	--vkui--elevation2: 0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06);