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

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

@@ -296,6 +296,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, icon
      */
     colorIconPositive: ColorDescription;
+    /**
+     * @desc Цвет иконок для предупреждений
+     * @tags color, icon
+     */
+    colorIconWarning: ColorDescription;
     /**
      * @desc Цвет иконок для ошибок и других негативных сценариев
      * @tags color, icon

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.46.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -43,25 +43,25 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.23.9",
+    "@babel/core": "7.24.5",
     "@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.1",
     "@types/node": "18.11.10",
-    "@types/react": "18.2.55",
-    "@types/react-dom": "18.2.19",
+    "@types/react": "18.3.2",
+    "@types/react-dom": "18.3.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.2.0",
-    "@vkontakte/icons": "2.108.0",
+    "@vkontakte/icons": "2.114.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",
-    "clsx": "2.1.0",
+    "clsx": "2.1.1",
     "color": "4.2.3",
     "common-tags": "1.8.2",
     "copy-webpack-plugin": "12.0.2",
@@ -87,8 +87,8 @@
     "lint-staged": "15.2.2",
     "lodash": "4.17.21",
     "prettier": "3.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "rimraf": "5.0.5",
     "style-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
@@ -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.18.2",
     "typescript": "5.2.2",
     "typescript-eslint": "7.0.1",
     "webpack": "5.91.0",

package/themeDescriptions/base/paradigm.js

@@ -88,7 +88,6 @@ exports.lightColors = {
         // Icons
         colorIconAccent: '#005FF9',
         colorIconAccentThemed: '#005FF9',
-        colorIconNegative: '#ED0A34',
         colorIconPrimary: '#2C2D2E',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#919399',
@@ -100,6 +99,8 @@ exports.lightColors = {
         colorIconContrast: '#FFFFFF',
         colorIconContrastThemed: '#FFFFFF',
         colorIconPositive: '#0DC268',
+        colorIconWarning: '#FF9E00',
+        colorIconNegative: '#ED0A34',
         colorIconContrastSecondary: '#F2F3F5',
         // Stroke
         colorStrokeAccent: '#005FF9',
@@ -213,7 +214,6 @@ exports.darkColors = {
         // Icons
         colorIconAccent: '#3C82FD',
         colorIconAccentThemed: '#FFFFFF',
-        colorIconNegative: '#FF5C5C',
         colorIconPrimary: '#D9DADD',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#B0B1B6',
@@ -225,6 +225,8 @@ exports.darkColors = {
         colorIconContrast: '#FFFFFF',
         colorIconContrastThemed: '#2C2D2E',
         colorIconPositive: '#0DC268',
+        colorIconWarning: '#FF9E00',
+        colorIconNegative: '#FF5C5C',
         colorIconContrastSecondary: '#F2F3F5',
         // Stroke
         colorStrokeAccent: '#3C82FD',
@@ -632,7 +634,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

@@ -91,11 +91,20 @@ var colorFromFigma = function (colorsScheme) {
             }[colorsScheme],
             colorBackgroundModal: background.background_modal,
             colorBackgroundModalInverse: background.background_modal_inverse,
-            colorBackgroundWarning: background.background_warning,
+            colorBackgroundWarning: {
+                light: '#FFF2D6',
+                dark: '#5B4D35',
+            }[colorsScheme],
             colorBackgroundPositive: background.background_positive,
             colorBackgroundNegative: background.background_negative,
-            colorBackgroundNegativeTint: background.background_negative_tint,
-            colorBackgroundPositiveTint: background.background_positive_tint,
+            colorBackgroundNegativeTint: {
+                light: '#FFE9E9',
+                dark: '#522E2E',
+            }[colorsScheme],
+            colorBackgroundPositiveTint: {
+                light: '#E8F9E8',
+                dark: '#2E3E2B',
+            }[colorsScheme],
             colorFieldBackground: background.field_background,
             colorHeaderBackground: background.header_background,
             // Text
@@ -131,6 +140,10 @@ var colorFromFigma = function (colorsScheme) {
             colorIconContrastThemed: icons.icon_contrast_themed,
             colorIconContrastSecondary: icons.icon_contrast_secondary,
             colorIconPositive: icons.icon_positive,
+            colorIconWarning: {
+                light: '#E1B406',
+                dark: '#DBAF06',
+            }[colorsScheme],
             colorIconNegative: icons.icon_negative,
             // Stroke
             colorStrokeAccent: stroke.stroke_accent,
@@ -619,7 +632,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);
@@ -539,9 +541,6 @@
 	--vkui--color_icon_accent_themed: #005FF9;
 	--vkui--color_icon_accent_themed--hover: #005CF1;
 	--vkui--color_icon_accent_themed--active: #0059EA;
-	--vkui--color_icon_negative: #ED0A34;
-	--vkui--color_icon_negative--hover: #E40A34;
-	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_primary: #2C2D2E;
 	--vkui--color_icon_primary--hover: #2A2C2F;
 	--vkui--color_icon_primary--active: #282B2F;
@@ -575,6 +574,12 @@
 	--vkui--color_icon_positive: #0DC268;
 	--vkui--color_icon_positive--hover: #0CBB66;
 	--vkui--color_icon_positive--active: #0CB465;
+	--vkui--color_icon_warning: #FF9E00;
+	--vkui--color_icon_warning--hover: #F59802;
+	--vkui--color_icon_warning--active: #EB9305;
+	--vkui--color_icon_negative: #ED0A34;
+	--vkui--color_icon_negative--hover: #E40A34;
+	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_contrast_secondary: #F2F3F5;
 	--vkui--color_icon_contrast_secondary--hover: #E8EAEE;
 	--vkui--color_icon_contrast_secondary--active: #DFE1E6;

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);
@@ -166,9 +168,6 @@
 	--vkui--color_icon_accent_themed: #005FF9;
 	--vkui--color_icon_accent_themed--hover: #005CF1;
 	--vkui--color_icon_accent_themed--active: #0059EA;
-	--vkui--color_icon_negative: #ED0A34;
-	--vkui--color_icon_negative--hover: #E40A34;
-	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_primary: #2C2D2E;
 	--vkui--color_icon_primary--hover: #2A2C2F;
 	--vkui--color_icon_primary--active: #282B2F;
@@ -202,6 +201,12 @@
 	--vkui--color_icon_positive: #0DC268;
 	--vkui--color_icon_positive--hover: #0CBB66;
 	--vkui--color_icon_positive--active: #0CB465;
+	--vkui--color_icon_warning: #FF9E00;
+	--vkui--color_icon_warning--hover: #F59802;
+	--vkui--color_icon_warning--active: #EB9305;
+	--vkui--color_icon_negative: #ED0A34;
+	--vkui--color_icon_negative--hover: #E40A34;
+	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_contrast_secondary: #F2F3F5;
 	--vkui--color_icon_contrast_secondary--hover: #E8EAEE;
 	--vkui--color_icon_contrast_secondary--active: #DFE1E6;

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

@@ -125,9 +125,6 @@
 	--vkui--color_icon_accent_themed: #005FF9;
 	--vkui--color_icon_accent_themed--hover: #005CF1;
 	--vkui--color_icon_accent_themed--active: #0059EA;
-	--vkui--color_icon_negative: #ED0A34;
-	--vkui--color_icon_negative--hover: #E40A34;
-	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_primary: #2C2D2E;
 	--vkui--color_icon_primary--hover: #2A2C2F;
 	--vkui--color_icon_primary--active: #282B2F;
@@ -161,6 +158,12 @@
 	--vkui--color_icon_positive: #0DC268;
 	--vkui--color_icon_positive--hover: #0CBB66;
 	--vkui--color_icon_positive--active: #0CB465;
+	--vkui--color_icon_warning: #FF9E00;
+	--vkui--color_icon_warning--hover: #F59802;
+	--vkui--color_icon_warning--active: #EB9305;
+	--vkui--color_icon_negative: #ED0A34;
+	--vkui--color_icon_negative--hover: #E40A34;
+	--vkui--color_icon_negative--active: #DA0A35;
 	--vkui--color_icon_contrast_secondary: #F2F3F5;
 	--vkui--color_icon_contrast_secondary--hover: #E8EAEE;
 	--vkui--color_icon_contrast_secondary--active: #DFE1E6;