@vkontakte/vkui-tokens 4.30.1 → 4.32.0

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

@@ -381,6 +381,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, palette
      */
     colorAccentViolet: ColorDescription;
+    /**
+     * @desc Палитра цветов. Розовый цвет
+     * @tags color, palette
+     */
+    colorAccentRaspberryPink: ColorDescription;
     /**
      * @desc Второстепенный акцентный цвет для отдельных проектов
      * @tags color, palette
@@ -431,6 +436,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, component, background
      */
     colorWriteBarInputBackground: ColorDescription;
+    /**
+     * @desc Цвет фона поля ввода в компоненте WriteBar
+     * @tags color, component
+     */
+    colorWriteBarInputBorder: ColorDescription;
     /**
      * @desc Цвет фона поля ввода в компоненте WriteBar с прозрачностью
      * @tags color, component, alpha

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

@@ -347,3 +347,30 @@ export interface Sizes {
      */
     sizeSubnavigationBarPaddingVertical: number;
 }
+export interface SpacingSizes {
+    /**
+     * @desc Стандартный токен размера xs для отступов
+     * @tags size
+     */
+    spacingSizeXs: number;
+    /**
+     * @desc Стандартный токен размера s для отступов
+     * @tags size
+     */
+    spacingSizeS: number;
+    /**
+     * @desc Стандартный токен размера m для отступов
+     * @tags size
+     */
+    spacingSizeM: number;
+    /**
+     * @desc Стандартный токен размера l для отступов
+     * @tags size
+     */
+    spacingSizeL: number;
+    /**
+     * @desc Стандартный токен размера xl для отступов
+     * @tags size
+     */
+    spacingSizeXl: number;
+}

package/interfaces/general/index.d.ts

@@ -2,7 +2,7 @@ import { Property } from 'csstype';
 import { Animations } from './animations';
 import { ColorDescription, Colors, ColorsDescriptionStruct } from './colors';
 import { Elevation } from './elevation';
-import { Sizes } from './geometry';
+import { Sizes, SpacingSizes } from './geometry';
 import { Gradients } from './gradients';
 import { ToneValues } from './toneValues';
 import { Adaptive } from './tools';
@@ -60,7 +60,7 @@ export interface WithThemeType {
 /**
  * Общий интерфейс между описанием и самой темой
  */
-export interface ThemeGeneral extends AdaptiveTokens, SpecialTokens, ToneValues, ZIndex, TypographyBaseProps, Elevation, Gradients, Animations {
+export interface ThemeGeneral extends AdaptiveTokens, SpecialTokens, ToneValues, ZIndex, TypographyBaseProps, Elevation, Gradients, Animations, SpacingSizes {
 }
 /**
  * Интерфейс описания Темы (в этом типе описываются все темы дизайн-системы)

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

@@ -68,7 +68,7 @@ export interface Fonts {
      */
     fontFootnote: Font;
     /**
-     * @desc Текст подписей строчными буквами
+     * @desc Текст подписей прописными буквами
      * @tags font
      */
     fontFootnoteCaps: Font;
@@ -78,7 +78,7 @@ export interface Fonts {
      */
     fontCaption1: Font;
     /**
-     * @desc Текст для подсказок строчными буквами, уровень 1
+     * @desc Текст для подсказок прописными буквами, уровень 1
      * @tags font
      */
     fontCaption1Caps: Font;
@@ -88,7 +88,7 @@ export interface Fonts {
      */
     fontCaption2: Font;
     /**
-     * @desc Текст для подсказок строчными буквами, уровень 2
+     * @desc Текст для подсказок прописными буквами, уровень 2
      * @tags font
      */
     fontCaption2Caps: Font;
@@ -98,7 +98,7 @@ export interface Fonts {
      */
     fontCaption3: Font;
     /**
-     * @desc Текст для подсказок строчными буквами, уровень 3
+     * @desc Текст для подсказок прописными буквами, уровень 3
      * @tags font
      */
     fontCaption3Caps: Font;
@@ -107,6 +107,11 @@ export interface Fonts {
  * Глобальные переменные типографии, которые можно использовать вне групп
  */
 export interface TypographyBaseProps {
+    /**
+     * @desc Фолбеки на случай пока грузится шрифт или если шрифт не загрузился
+     * @tags font
+     */
+    fontFamilyFallbacks: Property.FontFamily;
     /**
      * @desc Семейство шрифтов для заголовков
      * @tags font

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

@@ -88,6 +88,7 @@ export interface LocalOctaviusColorsDescriptionStruct {
     octaviusColorButtonBackgroundAlpha: ColorDescription;
     octaviusColorButtonEmptyStateText: ColorDescription;
     octaviusColorButtonEmptyStateBackgroundAlpha: ColorDescription;
+    octaviusColorSidebarWidgetBackgroundAlpha: ColorDescription;
     octaviusColorBackground: ColorDescription;
     octaviusColorOverlayBackground: ColorDescription;
     octaviusColorActionArchive: ColorDescription;

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

@@ -6,7 +6,7 @@ import { Adaptive } from '../../general/tools';
 import { Font } from '../../general/typography';
 import { ParadigmTheme, ParadigmThemeDescription } from '../../namespaces/paradigm';
 type AllowedParadigmTokens = 'themeName' | 'themeNameBase' | 'themeInheritsFrom' | 'prefix' | 'fontFamilyAccent' | 'fontFamilyBase' | 'fontWeightAccent1' | 'fontWeightAccent2' | 'fontWeightBase1' | 'fontWeightBase2' | 'fontTitle1' | 'fontTitle2' | 'fontTitle3' | 'fontHeadline1' | 'fontHeadline2' | 'fontText' | 'fontParagraph' | 'fontSubhead' | 'fontFootnote' | 'fontFootnoteCaps' | 'fontCaption1' | 'fontCaption1Caps' | 'fontCaption2' | 'fontCaption2Caps' | 'fontCaption3' | 'fontCaption3Caps' | 'animationEasingDefault' | 'animationDurationS' | 'animationDurationM' | 'animationDurationL' | 'sizeAvatarXS' | 'sizeAvatarS' | 'sizeAvatarM' | 'sizeAvatarL' | 'sizeBorderRadius' | 'sizeButtonSmallHeight' | 'sizeButtonMediumHeight' | 'sizeButtonLargeHeight' | 'sizePopupMedium' | 'sizePopupLarge' | 'sizeButtonPaddingHorizontal' | 'sizeFieldHorizontalPadding' | 'elevation1' | 'elevation2' | 'elevation3' | 'opacityDisable';
-export type AllowedParadigmColorTokens = 'colorTextPrimary' | 'colorTextPrimaryInvariably' | 'colorTextSecondary' | 'colorTextTertiary' | 'colorTextSubhead' | 'colorTextAccent' | 'colorTextAccentThemed' | 'colorTextLink' | 'colorTextLinkThemed' | 'colorTextLinkVisited' | 'colorTextNegative' | 'colorTextPositive' | 'colorTextMuted' | 'colorTextContrast' | 'colorTextContrastThemed' | 'colorLinkContrast' | 'colorIconPrimary' | 'colorIconPrimaryInvariably' | 'colorIconSecondary' | 'colorIconSecondaryAlpha' | 'colorIconMedium' | 'colorIconMediumAlpha' | 'colorIconTertiary' | 'colorIconTertiaryAlpha' | 'colorIconAccent' | 'colorIconAccentThemed' | 'colorIconNegative' | 'colorIconPositive' | 'colorIconContrast' | 'colorIconContrastThemed' | 'colorBackground' | 'colorBackgroundContent' | 'colorBackgroundAccentAlternative' | 'colorBackgroundModal' | 'colorBackgroundSecondary' | 'colorBackgroundSecondaryAlpha' | 'colorBackgroundTertiary' | 'colorBackgroundAccent' | 'colorBackgroundAccentTintAlpha' | 'colorBackgroundNegativeTintAlpha' | 'colorBackgroundPositiveTintAlpha' | 'colorBackgroundWarningTintAlpha' | 'colorBackgroundAccentThemed' | 'colorBackgroundNegative' | 'colorBackgroundNegativeTint' | 'colorBackgroundPositive' | 'colorBackgroundContrast' | 'colorBackgroundContrastSecondaryAlpha' | 'colorBackgroundWarning' | 'colorSeparatorPrimary' | 'colorSeparatorPrimaryAlpha' | 'colorSeparatorSecondary' | 'colorImageBorderAlpha' | 'colorFieldBorderAlpha' | 'colorStrokeAccent' | 'colorStrokeAccentThemed' | 'colorStrokeContrast' | 'colorStrokeNegative' | 'colorStrokePositive' | 'colorAccentBlue' | 'colorAccentGray' | 'colorAccentRed' | 'colorAccentGreen' | 'colorAccentOrange' | 'colorAccentPurple' | 'colorAccentViolet' | 'colorAccentSecondary' | 'colorTransparent' | 'colorActionSheetText' | 'colorHeaderBackground' | 'colorPanelHeaderIcon' | 'colorWriteBarIcon' | 'colorWriteBarInputBackground' | 'colorWriteBarInputBorderAlpha' | 'colorTrackBackground' | 'colorOverlayPrimary' | 'colorTrackBuffer' | 'colorImagePlaceholder' | 'colorImagePlaceholderAlpha' | 'colorSearchFieldBackground' | 'colorSkeletonTo' | 'colorSkeletonFrom' | 'colorAvatarOverlay';
+export type AllowedParadigmColorTokens = 'colorTextPrimary' | 'colorTextPrimaryInvariably' | 'colorTextSecondary' | 'colorTextTertiary' | 'colorTextSubhead' | 'colorTextAccent' | 'colorTextAccentThemed' | 'colorTextLink' | 'colorTextLinkThemed' | 'colorTextLinkVisited' | 'colorTextNegative' | 'colorTextPositive' | 'colorTextMuted' | 'colorTextContrast' | 'colorTextContrastThemed' | 'colorLinkContrast' | 'colorIconPrimary' | 'colorIconPrimaryInvariably' | 'colorIconSecondary' | 'colorIconSecondaryAlpha' | 'colorIconMedium' | 'colorIconMediumAlpha' | 'colorIconTertiary' | 'colorIconTertiaryAlpha' | 'colorIconAccent' | 'colorIconAccentThemed' | 'colorIconNegative' | 'colorIconPositive' | 'colorIconContrast' | 'colorIconContrastThemed' | 'colorBackground' | 'colorBackgroundContent' | 'colorBackgroundAccentAlternative' | 'colorBackgroundModal' | 'colorBackgroundSecondary' | 'colorBackgroundSecondaryAlpha' | 'colorBackgroundTertiary' | 'colorBackgroundAccent' | 'colorBackgroundAccentTintAlpha' | 'colorBackgroundNegativeTintAlpha' | 'colorBackgroundPositiveTintAlpha' | 'colorBackgroundWarningTintAlpha' | 'colorBackgroundAccentThemed' | 'colorBackgroundNegative' | 'colorBackgroundNegativeTint' | 'colorBackgroundPositive' | 'colorBackgroundContrast' | 'colorBackgroundContrastSecondaryAlpha' | 'colorBackgroundWarning' | 'colorSeparatorPrimary' | 'colorSeparatorPrimaryAlpha' | 'colorSeparatorSecondary' | 'colorImageBorderAlpha' | 'colorFieldBorderAlpha' | 'colorStrokeAccent' | 'colorStrokeAccentThemed' | 'colorStrokeContrast' | 'colorStrokeNegative' | 'colorStrokePositive' | 'colorAccentBlue' | 'colorAccentGray' | 'colorAccentRed' | 'colorAccentGreen' | 'colorAccentOrange' | 'colorAccentPurple' | 'colorAccentViolet' | 'colorAccentRaspberryPink' | 'colorAccentSecondary' | 'colorTransparent' | 'colorActionSheetText' | 'colorHeaderBackground' | 'colorPanelHeaderIcon' | 'colorWriteBarIcon' | 'colorWriteBarInputBackground' | 'colorWriteBarInputBorderAlpha' | 'colorTrackBackground' | 'colorOverlayPrimary' | 'colorTrackBuffer' | 'colorImagePlaceholder' | 'colorImagePlaceholderAlpha' | 'colorSearchFieldBackground' | 'colorSkeletonTo' | 'colorSkeletonFrom' | 'colorAvatarOverlay';
 export interface ThemePulseMediaTypography {
     fontFamilyMedia: Property.FontFamily;
     fontMediaHeader: Adaptive<Font>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.30.1",
+  "version": "4.32.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -32,7 +32,7 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.20.12",
+    "@babel/core": "7.21.3",
     "@svgr/webpack": "6.5.1",
     "@types/color": "3.0.3",
     "@types/common-tags": "1.8.1",
@@ -43,13 +43,13 @@
     "@types/react-dom": "18.0.10",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
-    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.0",
-    "@vkontakte/icons": "2.14.0",
+    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.2",
+    "@vkontakte/icons": "2.23.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.7.2",
     "@vkontakte/vkjs": "0.31.0",
     "@vkontakte/vkui": "5.1.0",
-    "babel-jest": "29.4.1",
+    "babel-jest": "29.5.0",
     "babel-loader": "9.1.2",
     "clean-webpack-plugin": "4.0.0",
     "clsx": "1.2.1",
@@ -66,8 +66,8 @@
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jasmine": "4.1.3",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-simple-import-sort": "8.0.0",
-    "eslint-plugin-sonarjs": "0.17.0",
+    "eslint-plugin-simple-import-sort": "10.0.0",
+    "eslint-plugin-sonarjs": "0.19.0",
     "fs-extra": "11.1.0",
     "html-webpack-plugin": "5.5.0",
     "jest": "29.4.1",
@@ -76,7 +76,7 @@
     "prettier": "2.8.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rimraf": "4.4.0",
+    "rimraf": "4.4.1",
     "style-loader": "3.3.1",
     "terser-webpack-plugin": "5.3.6",
     "ts-jest": "29.0.5",
@@ -87,7 +87,7 @@
     "tscpaths": "0.0.9",
     "type-fest": "3.6.1",
     "typescript": "4.9.5",
-    "webpack": "5.76.1",
+    "webpack": "5.77.0",
     "webpack-cli": "5.0.1",
     "webpack-dev-server": "4.11.1",
     "webpack-notifier": "1.15.0"

package/themeDescriptions/base/paradigm.js

@@ -16,15 +16,16 @@ var getGradientPointsFromColor_1 = require("../../build/helpers/getGradientPoint
 var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
 var overlayColors_1 = require("../../build/themeProcessors/expandColors/overlayColors");
 var common_1 = require("../../utils/common");
-var fontFamilyAccent = 'MailSans, Helvetica, Arial, sans-serif';
-var fontFamilyBase = 'Helvetica, Arial, sans-serif';
+var fontFamilyFallbacks = 'Helvetica, Arial, sans-serif';
+var fontFamilyAccent = "MailSans, ".concat(fontFamilyFallbacks);
+var fontFamilyBase = fontFamilyFallbacks;
 var fontWeightAccent1 = 500;
 var fontWeightAccent2 = 500;
 var fontWeightAccent3 = 400;
 var fontWeightBase1 = 700;
 var fontWeightBase2 = 700;
 var fontWeightBase3 = 400;
-var colorBackgroundTertiaryLight = '#F9F9FA';
+var colorBackgroundTertiaryLight = '#F6F7F8';
 var colorBackgroundTertiaryDark = '#252525';
 exports.lightColors = {
     colorsScheme: 'light',
@@ -117,12 +118,14 @@ exports.lightColors = {
         colorAccentOrange: '#FF9E00',
         colorAccentPurple: '#4F6DDC',
         colorAccentViolet: '#C15DF3',
+        colorAccentRaspberryPink: '#E03FAB',
         colorAccentSecondary: '#FF9E00',
         // Other
         colorActionSheetText: '#005FF9',
         colorHeaderBackground: '#FFFFFF',
         colorPanelHeaderIcon: '#005FF9',
         colorWriteBarInputBackground: '#F0F1F3',
+        colorWriteBarInputBorder: '#E1E3E6',
         colorWriteBarInputBorderAlpha: 'rgba(0, 16, 61, 0.8)',
         colorTrackBackground: '#DADCE0',
         colorTrackBuffer: '#83AAEA',
@@ -230,12 +233,14 @@ exports.darkColors = {
         colorAccentOrange: '#FF9E00',
         colorAccentPurple: '#4F6DDC',
         colorAccentViolet: '#C15DF3',
+        colorAccentRaspberryPink: '#F060C0',
         colorAccentSecondary: '#FF9E00',
         // Other
         colorActionSheetText: '#3C82FD',
         colorHeaderBackground: '#232324',
         colorPanelHeaderIcon: '#3C82FD',
         colorWriteBarInputBackground: '#2A2A2B',
+        colorWriteBarInputBorder: '#2C2D2E',
         colorWriteBarInputBorderAlpha: 'rgba(255, 255, 255, 0.8)',
         colorTrackBackground: '#434445',
         colorTrackBuffer: '#83AAEA',
@@ -254,7 +259,7 @@ exports.darkColors = {
 };
 exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, exports.lightColors), { 
     // Типографика
-    fontFamilyAccent: fontFamilyAccent, fontFamilyBase: fontFamilyBase, fontWeightAccent1: fontWeightAccent1, fontWeightAccent2: fontWeightAccent2, fontWeightAccent3: fontWeightAccent3, fontWeightBase1: fontWeightBase1, fontWeightBase2: fontWeightBase2, fontWeightBase3: fontWeightBase3, fontTitle1: {
+    fontFamilyFallbacks: fontFamilyFallbacks, fontFamilyAccent: fontFamilyAccent, fontFamilyBase: fontFamilyBase, fontWeightAccent1: fontWeightAccent1, fontWeightAccent2: fontWeightAccent2, fontWeightAccent3: fontWeightAccent3, fontWeightBase1: fontWeightBase1, fontWeightBase2: fontWeightBase2, fontWeightBase3: fontWeightBase3, fontTitle1: {
         regular: {
             fontSize: 24,
             lineHeight: 28,
@@ -560,6 +565,8 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     sizeSubnavigationBarPaddingVertical: {
         regular: 12,
     }, 
+    // Стандартные токены для отступов
+    spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, 
     // Прочие отступы
     elevation1: '0 2px 0 0 rgba(0, 16, 61, 0.04)', elevation1InvertY: '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)', gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4), gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryLight), 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

@@ -14,8 +14,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.darkTheme = exports.lightTheme = exports.darkElevation = exports.darkGradient = exports.darkColors = exports.lightElevation = exports.lightGradient = exports.lightColors = void 0;
 var getGradientPointsFromColor_1 = require("../../build/helpers/getGradientPointsFromColor");
 var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
-var fontFamilyAccent = "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif";
-var fontFamilyBase = "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif";
+var fontFamilyFallbacks = '-apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif';
+var fontFamilyAccent = fontFamilyFallbacks;
+var fontFamilyBase = fontFamilyFallbacks;
 var fontWeightAccent1 = 600;
 var fontWeightAccent2 = 500;
 var fontWeightAccent3 = 400;
@@ -52,7 +53,7 @@ exports.lightColors = {
             hover: 'rgba(255, 255, 255, 0.24)',
             active: 'rgba(255, 255, 255, 0.28)',
         },
-        colorBackgroundContrastInverse: '#2d2d2e',
+        colorBackgroundContrastInverse: '#2C2D2E',
         colorBackgroundModal: '#FFFFFF',
         colorBackgroundModalInverse: '#2d2d2e',
         colorBackgroundWarning: '#FFF2D6',
@@ -120,6 +121,7 @@ exports.lightColors = {
         colorAccentOrange: '#FFA000',
         colorAccentPurple: '#735CE6',
         colorAccentViolet: '#792EC0',
+        colorAccentRaspberryPink: '#E03FAB',
         colorAccentSecondary: '#3F8AE0',
         // Other
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.4)',
@@ -132,6 +134,7 @@ exports.lightColors = {
         colorSkeletonTo: '#E1E3E6',
         colorWriteBarIcon: '#3F8AE0',
         colorWriteBarInputBackground: '#F2F3F5',
+        colorWriteBarInputBorder: '#E1E3E6',
         colorWriteBarInputBorderAlpha: 'rgba(0, 0, 0, 0.08)',
         colorTrackBackground: '#E1E3E6',
         colorTrackBuffer: '#A0BFE4',
@@ -181,15 +184,15 @@ exports.darkColors = {
             hover: 'rgba(255, 255, 255, 0.24)',
             active: 'rgba(255, 255, 255, 0.28)',
         },
-        colorBackgroundContrastInverse: '#2d2d2e',
-        colorBackgroundModal: '#2D2D2E',
+        colorBackgroundContrastInverse: '#2C2D2E',
+        colorBackgroundModal: '#2C2D2E',
         colorBackgroundModalInverse: '#ffffff',
         colorBackgroundWarning: '#857250',
         colorBackgroundPositive: '#4BB34B',
         colorBackgroundNegative: '#FF5C5C',
         colorBackgroundNegativeTint: '#522E2E',
         colorBackgroundPositiveTint: '#E8f9e8',
-        colorFieldBackground: '#292929',
+        colorFieldBackground: '#232324',
         colorHeaderBackground: '#19191A',
         // Text
         colorTextAccent: '#529EF4',
@@ -198,7 +201,7 @@ exports.darkColors = {
         colorTextPrimaryInvariably: '#000000',
         colorTextSecondary: '#76787A',
         colorTextSubhead: '#969A9F',
-        colorTextTertiary: '#636567',
+        colorTextTertiary: '#5D5F61',
         colorTextContrast: '#FFFFFF',
         colorTextContrastThemed: '#000000',
         colorTextPositive: '#4BB34B',
@@ -245,6 +248,7 @@ exports.darkColors = {
         colorAccentOrange: '#FFA000',
         colorAccentPurple: '#735CE6',
         colorAccentViolet: '#792EC0',
+        colorAccentRaspberryPink: '#F060C0',
         colorAccentSecondary: '#3F8AE0',
         // Other
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.4)',
@@ -252,10 +256,11 @@ exports.darkColors = {
         colorAvatarOverlayInverseAlpha: 'rgba(255, 255, 255, 0.85)',
         colorImagePlaceholder: '#2A2B2C',
         colorImagePlaceholderAlpha: 'rgba(241, 247, 255, 0.08)',
-        colorSkeletonFrom: '#F5F5F5',
-        colorSkeletonTo: '#E1E3E6',
+        colorSkeletonFrom: '#232324',
+        colorSkeletonTo: '#2C2D2E',
         colorWriteBarIcon: '#529EF4',
-        colorWriteBarInputBackground: '#232324',
+        colorWriteBarInputBackground: '#2C2D2E',
+        colorWriteBarInputBorder: '#2C2D2E',
         colorWriteBarInputBorderAlpha: 'rgba(255, 255, 255, 0.8)',
         colorActionSheetText: '#529EF4',
         colorTrackBackground: '#454647',
@@ -281,7 +286,7 @@ exports.darkElevation = {
 };
 exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), exports.lightGradient), exports.lightElevation), { 
     // Типографика
-    fontFamilyAccent: fontFamilyAccent, fontFamilyBase: fontFamilyBase, fontWeightAccent1: fontWeightAccent1, fontWeightAccent2: fontWeightAccent2, fontWeightAccent3: fontWeightAccent3, fontWeightBase1: fontWeightBase1, fontWeightBase2: fontWeightBase2, fontWeightBase3: fontWeightBase3, fontTitle1: {
+    fontFamilyFallbacks: fontFamilyFallbacks, fontFamilyAccent: fontFamilyAccent, fontFamilyBase: fontFamilyBase, fontWeightAccent1: fontWeightAccent1, fontWeightAccent2: fontWeightAccent2, fontWeightAccent3: fontWeightAccent3, fontWeightBase1: fontWeightBase1, fontWeightBase2: fontWeightBase2, fontWeightBase3: fontWeightBase3, fontTitle1: {
         regular: {
             fontSize: 24,
             lineHeight: 28,
@@ -575,6 +580,8 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
     sizeSubnavigationBarPaddingVertical: {
         regular: 12,
     }, 
+    // Стандартные токены для отступов
+    spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, 
     // Разное
     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

@@ -1,5 +1,6 @@
 :root {
 	--vkui--theme_name: 'calendar';
+	--vkui--font_family_fallbacks: Helvetica, Arial, sans-serif;
 	--vkui--font_family_accent: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_family_base: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_weight_accent1: 500;
@@ -228,6 +229,11 @@
 	--vkui--size_split_col_padding_horizontal--regular: 16px;
 	--vkui--size_subnavigation_bar_gap--regular: 8px;
 	--vkui--size_subnavigation_bar_padding_vertical--regular: 12px;
+	--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--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
@@ -235,7 +241,7 @@
 	--vkui--elevation4: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
 	--vkui--gradient_black: rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) 100%;
 	--vkui--gradient_white: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.036) 13%, rgba(255, 255, 255, 0.15) 27%, rgba(255, 255, 255, 0.79) 68%, rgba(255, 255, 255, 0.95) 84%, rgba(255, 255, 255, 1) 100%;
-	--vkui--gradient_tint: rgba(249, 249, 250, 0) 0%, rgba(249, 249, 250, 0.036) 13%, rgba(249, 249, 250, 0.15) 27%, rgba(249, 249, 250, 0.79) 68%, rgba(249, 249, 250, 0.95) 84%, rgba(249, 249, 250, 1) 100%;
+	--vkui--gradient_tint: rgba(246, 247, 248, 0) 0%, rgba(246, 247, 248, 0.036) 13%, rgba(246, 247, 248, 0.15) 27%, rgba(246, 247, 248, 0.79) 68%, rgba(246, 247, 248, 0.95) 84%, rgba(246, 247, 248, 1) 100%;
 	--vkui--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;
@@ -411,9 +417,9 @@
 	--vkui--color_background_negative: #ED0A34;
 	--vkui--color_background_negative--hover: #E40A34;
 	--vkui--color_background_negative--active: #DA0A35;
-	--vkui--color_background_tertiary: #F9F9FA;
-	--vkui--color_background_tertiary--hover: #EFF0F2;
-	--vkui--color_background_tertiary--active: #E5E6EB;
+	--vkui--color_background_tertiary: #F6F7F8;
+	--vkui--color_background_tertiary--hover: #ECEEF1;
+	--vkui--color_background_tertiary--active: #E2E5E9;
 	--vkui--color_background_tertiary_alpha: rgba(0, 0, 0, 0.04);
 	--vkui--color_background_tertiary_alpha--hover: rgba(0, 0, 0, 0.08);
 	--vkui--color_background_tertiary_alpha--active: rgba(0, 0, 0, 0.12);
@@ -591,6 +597,9 @@
 	--vkui--color_accent_violet: #C15DF3;
 	--vkui--color_accent_violet--hover: #B95AEC;
 	--vkui--color_accent_violet--active: #B257E4;
+	--vkui--color_accent_raspberry_pink: #E03FAB;
+	--vkui--color_accent_raspberry_pink--hover: #D73DA7;
+	--vkui--color_accent_raspberry_pink--active: #CE3BA2;
 	--vkui--color_accent_secondary: #FF9E00;
 	--vkui--color_accent_secondary--hover: #F59802;
 	--vkui--color_accent_secondary--active: #EB9305;
@@ -606,6 +615,9 @@
 	--vkui--color_write_bar_input_background: #F0F1F3;
 	--vkui--color_write_bar_input_background--hover: #E6E8EC;
 	--vkui--color_write_bar_input_background--active: #DDDFE4;
+	--vkui--color_write_bar_input_border: #E1E3E6;
+	--vkui--color_write_bar_input_border--hover: #D8DBDF;
+	--vkui--color_write_bar_input_border--active: #CFD2D8;
 	--vkui--color_write_bar_input_border_alpha: rgba(0, 16, 61, 0.8);
 	--vkui--color_write_bar_input_border_alpha--hover: rgba(0, 16, 61, 0.84);
 	--vkui--color_write_bar_input_border_alpha--active: rgba(0, 16, 61, 0.88);

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

@@ -1,5 +1,6 @@
 :root {
 	--vkui--theme_name: 'calendar';
+	--vkui--font_family_fallbacks: Helvetica, Arial, sans-serif;
 	--vkui--font_family_accent: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_family_base: MailSans, Helvetica, Arial, sans-serif;
 	--vkui--font_weight_accent1: 500;
@@ -228,6 +229,11 @@
 	--vkui--size_split_col_padding_horizontal--regular: 16px;
 	--vkui--size_subnavigation_bar_gap--regular: 8px;
 	--vkui--size_subnavigation_bar_padding_vertical--regular: 12px;
+	--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--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
@@ -235,7 +241,7 @@
 	--vkui--elevation4: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
 	--vkui--gradient_black: rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) 100%;
 	--vkui--gradient_white: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.036) 13%, rgba(255, 255, 255, 0.15) 27%, rgba(255, 255, 255, 0.79) 68%, rgba(255, 255, 255, 0.95) 84%, rgba(255, 255, 255, 1) 100%;
-	--vkui--gradient_tint: rgba(249, 249, 250, 0) 0%, rgba(249, 249, 250, 0.036) 13%, rgba(249, 249, 250, 0.15) 27%, rgba(249, 249, 250, 0.79) 68%, rgba(249, 249, 250, 0.95) 84%, rgba(249, 249, 250, 1) 100%;
+	--vkui--gradient_tint: rgba(246, 247, 248, 0) 0%, rgba(246, 247, 248, 0.036) 13%, rgba(246, 247, 248, 0.15) 27%, rgba(246, 247, 248, 0.79) 68%, rgba(246, 247, 248, 0.95) 84%, rgba(246, 247, 248, 1) 100%;
 	--vkui--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;

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

@@ -1,5 +1,10 @@
 :root {
 	--vkui--theme_name: 'calendar';
+	--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--elevation1: 0 2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation1_invert_y: 0 -2px 0 0 rgba(0, 16, 61, 0.04);
 	--vkui--elevation2: 0 4px 32px 0 rgba(0, 16, 61, 0.32);
@@ -7,7 +12,7 @@
 	--vkui--elevation4: 0 16px 48px 0 rgba(0, 0, 0, 0.48);
 	--vkui--gradient_black: rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) 100%;
 	--vkui--gradient_white: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.036) 13%, rgba(255, 255, 255, 0.15) 27%, rgba(255, 255, 255, 0.79) 68%, rgba(255, 255, 255, 0.95) 84%, rgba(255, 255, 255, 1) 100%;
-	--vkui--gradient_tint: rgba(249, 249, 250, 0) 0%, rgba(249, 249, 250, 0.036) 13%, rgba(249, 249, 250, 0.15) 27%, rgba(249, 249, 250, 0.79) 68%, rgba(249, 249, 250, 0.95) 84%, rgba(249, 249, 250, 1) 100%;
+	--vkui--gradient_tint: rgba(246, 247, 248, 0) 0%, rgba(246, 247, 248, 0.036) 13%, rgba(246, 247, 248, 0.15) 27%, rgba(246, 247, 248, 0.79) 68%, rgba(246, 247, 248, 0.95) 84%, rgba(246, 247, 248, 1) 100%;
 	--vkui--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;
@@ -64,9 +69,9 @@
 	--vkui--color_background_negative: #ED0A34;
 	--vkui--color_background_negative--hover: #E40A34;
 	--vkui--color_background_negative--active: #DA0A35;
-	--vkui--color_background_tertiary: #F9F9FA;
-	--vkui--color_background_tertiary--hover: #EFF0F2;
-	--vkui--color_background_tertiary--active: #E5E6EB;
+	--vkui--color_background_tertiary: #F6F7F8;
+	--vkui--color_background_tertiary--hover: #ECEEF1;
+	--vkui--color_background_tertiary--active: #E2E5E9;
 	--vkui--color_background_tertiary_alpha: rgba(0, 0, 0, 0.04);
 	--vkui--color_background_tertiary_alpha--hover: rgba(0, 0, 0, 0.08);
 	--vkui--color_background_tertiary_alpha--active: rgba(0, 0, 0, 0.12);
@@ -244,6 +249,9 @@
 	--vkui--color_accent_violet: #C15DF3;
 	--vkui--color_accent_violet--hover: #B95AEC;
 	--vkui--color_accent_violet--active: #B257E4;
+	--vkui--color_accent_raspberry_pink: #E03FAB;
+	--vkui--color_accent_raspberry_pink--hover: #D73DA7;
+	--vkui--color_accent_raspberry_pink--active: #CE3BA2;
 	--vkui--color_accent_secondary: #FF9E00;
 	--vkui--color_accent_secondary--hover: #F59802;
 	--vkui--color_accent_secondary--active: #EB9305;
@@ -259,6 +267,9 @@
 	--vkui--color_write_bar_input_background: #F0F1F3;
 	--vkui--color_write_bar_input_background--hover: #E6E8EC;
 	--vkui--color_write_bar_input_background--active: #DDDFE4;
+	--vkui--color_write_bar_input_border: #E1E3E6;
+	--vkui--color_write_bar_input_border--hover: #D8DBDF;
+	--vkui--color_write_bar_input_border--active: #CFD2D8;
 	--vkui--color_write_bar_input_border_alpha: rgba(0, 16, 61, 0.8);
 	--vkui--color_write_bar_input_border_alpha--hover: rgba(0, 16, 61, 0.84);
 	--vkui--color_write_bar_input_border_alpha--active: rgba(0, 16, 61, 0.88);

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

@@ -32,9 +32,9 @@
 	--vkui--color_background_negative: #ED0A34;
 	--vkui--color_background_negative--hover: #E40A34;
 	--vkui--color_background_negative--active: #DA0A35;
-	--vkui--color_background_tertiary: #F9F9FA;
-	--vkui--color_background_tertiary--hover: #EFF0F2;
-	--vkui--color_background_tertiary--active: #E5E6EB;
+	--vkui--color_background_tertiary: #F6F7F8;
+	--vkui--color_background_tertiary--hover: #ECEEF1;
+	--vkui--color_background_tertiary--active: #E2E5E9;
 	--vkui--color_background_tertiary_alpha: rgba(0, 0, 0, 0.04);
 	--vkui--color_background_tertiary_alpha--hover: rgba(0, 0, 0, 0.08);
 	--vkui--color_background_tertiary_alpha--active: rgba(0, 0, 0, 0.12);
@@ -212,6 +212,9 @@
 	--vkui--color_accent_violet: #C15DF3;
 	--vkui--color_accent_violet--hover: #B95AEC;
 	--vkui--color_accent_violet--active: #B257E4;
+	--vkui--color_accent_raspberry_pink: #E03FAB;
+	--vkui--color_accent_raspberry_pink--hover: #D73DA7;
+	--vkui--color_accent_raspberry_pink--active: #CE3BA2;
 	--vkui--color_accent_secondary: #FF9E00;
 	--vkui--color_accent_secondary--hover: #F59802;
 	--vkui--color_accent_secondary--active: #EB9305;
@@ -227,6 +230,9 @@
 	--vkui--color_write_bar_input_background: #F0F1F3;
 	--vkui--color_write_bar_input_background--hover: #E6E8EC;
 	--vkui--color_write_bar_input_background--active: #DDDFE4;
+	--vkui--color_write_bar_input_border: #E1E3E6;
+	--vkui--color_write_bar_input_border--hover: #D8DBDF;
+	--vkui--color_write_bar_input_border--active: #CFD2D8;
 	--vkui--color_write_bar_input_border_alpha: rgba(0, 16, 61, 0.8);
 	--vkui--color_write_bar_input_border_alpha--hover: rgba(0, 16, 61, 0.84);
 	--vkui--color_write_bar_input_border_alpha--active: rgba(0, 16, 61, 0.88);