@vkontakte/vkui-tokens 4.13.1-dev-3a911f.0 → 4.14.1

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

@@ -23,28 +23,42 @@ export declare type ColorDescription<T extends {
 export interface ColorsDescriptionStruct {
     colorBackgroundAccent: ColorDescription;
     colorBackgroundAccentThemed: ColorDescription;
+    colorBackgroundAccentTint: ColorDescription;
     colorBackgroundAccentAlternative: ColorDescription;
-    colorIconAccent: ColorDescription;
-    colorTextAccent: ColorDescription;
-    colorTextAccentThemed: ColorDescription;
-    colorStrokeAccent: ColorDescription;
-    colorStrokeAccentThemed: ColorDescription;
-    colorStrokeContrast: ColorDescription;
-    colorActionSheetText: ColorDescription;
+    colorBackground: ColorDescription;
     colorBackgroundContent: ColorDescription;
     colorBackgroundSecondary: ColorDescription;
     colorBackgroundSecondaryAlpha: ColorDescription;
     colorBackgroundTertiary: ColorDescription;
-    colorBackground: ColorDescription;
     colorBackgroundContrast: ColorDescription;
     colorBackgroundContrastSecondaryAlpha: ColorDescription;
+    colorBackgroundContrastInverse: ColorDescription;
+    colorBackgroundModal: ColorDescription;
+    colorBackgroundModalInverse: ColorDescription;
     colorBackgroundWarning: ColorDescription;
+    colorBackgroundPositive: ColorDescription;
     colorBackgroundNegative: ColorDescription;
-    colorIconNegative: ColorDescription;
-    colorTextNegative: ColorDescription;
-    colorStrokeNegative: ColorDescription;
+    colorBackgroundNegativeTint: ColorDescription;
+    colorFieldBackground: ColorDescription;
     colorHeaderBackground: ColorDescription;
-    colorPanelHeaderIcon: ColorDescription;
+    colorTextAccent: ColorDescription;
+    colorTextAccentThemed: ColorDescription;
+    colorTextPrimary: ColorDescription;
+    colorTextPrimaryInvariably: ColorDescription;
+    colorTextSecondary: ColorDescription;
+    colorTextSubhead: ColorDescription;
+    colorTextTertiary: ColorDescription;
+    colorTextContrast: ColorDescription;
+    colorTextContrastThemed: ColorDescription;
+    colorTextPositive: ColorDescription;
+    colorTextNegative: ColorDescription;
+    colorTextLink: ColorDescription;
+    colorTextLinkThemed: ColorDescription;
+    colorTextLinkVisited: ColorDescription;
+    colorTextMuted: ColorDescription;
+    colorLinkContrast: ColorDescription;
+    colorIconAccent: ColorDescription;
+    colorIconAccentThemed: ColorDescription;
     colorIconPrimary: ColorDescription;
     colorIconPrimaryInvariably: ColorDescription;
     colorIconMedium: ColorDescription;
@@ -53,28 +67,23 @@ export interface ColorsDescriptionStruct {
     colorIconSecondaryAlpha: ColorDescription;
     colorIconTertiary: ColorDescription;
     colorIconTertiaryAlpha: ColorDescription;
+    colorIconContrast: ColorDescription;
+    colorIconContrastThemed: ColorDescription;
+    colorIconContrastSecondary: ColorDescription;
+    colorIconPositive: ColorDescription;
+    colorIconNegative: ColorDescription;
+    colorStrokeAccent: ColorDescription;
+    colorStrokeAccentThemed: ColorDescription;
+    colorStrokePositive: ColorDescription;
+    colorStrokeNegative: ColorDescription;
+    colorStrokeContrast: ColorDescription;
     colorImageBorderAlpha: ColorDescription;
-    colorWriteBarInputBackground: ColorDescription;
-    colorWriteBarInputBorderAlpha: ColorDescription;
-    colorTrackBackground: ColorDescription;
-    colorTrackBuffer: ColorDescription;
-    colorBackgroundModal: ColorDescription;
-    colorImagePlaceholder: ColorDescription;
-    colorImagePlaceholderAlpha: ColorDescription;
-    colorSearchFieldBackground: ColorDescription;
     colorFieldBorderAlpha: ColorDescription;
     colorSeparatorPrimaryAlpha: ColorDescription;
     colorSeparatorSecondary: ColorDescription;
     colorSeparatorPrimary: ColorDescription;
-    colorTextLink: ColorDescription;
-    colorTextLinkThemed: ColorDescription;
-    colorTextMuted: ColorDescription;
-    colorTextPrimary: ColorDescription;
-    colorTextPrimaryInvariably: ColorDescription;
-    colorTextSecondary: ColorDescription;
-    colorTextSubhead: ColorDescription;
-    colorTextTertiary: ColorDescription;
-    colorWriteBarIcon: ColorDescription;
+    colorSeparatorPrimary2x: ColorDescription;
+    colorSeparatorPrimary3x: ColorDescription;
     colorAccentBlue: ColorDescription;
     colorAccentGray: ColorDescription;
     colorAccentRed: ColorDescription;
@@ -82,26 +91,24 @@ export interface ColorsDescriptionStruct {
     colorAccentOrange: ColorDescription;
     colorAccentPurple: ColorDescription;
     colorAccentViolet: ColorDescription;
-    colorSkeletonFrom: ColorDescription;
-    colorSkeletonTo: ColorDescription;
     colorAccentSecondary: ColorDescription;
-    colorTextLinkVisited: ColorDescription;
-    colorTextContrast: ColorDescription;
-    colorTextContrastThemed: ColorDescription;
-    colorIconContrast: ColorDescription;
-    colorIconContrastThemed: ColorDescription;
-    colorLinkContrast: ColorDescription;
-    colorBackgroundPositive: ColorDescription;
-    colorIconPositive: ColorDescription;
-    colorTextPositive: ColorDescription;
-    colorStrokePositive: ColorDescription;
+    colorOverlayPrimary: ColorDescription;
     colorAvatarOverlay: ColorDescription;
     colorAvatarOverlayInverseAlpha: ColorDescription;
-    colorOverlayPrimary: ColorDescription;
+    colorImagePlaceholder: ColorDescription;
+    colorImagePlaceholderAlpha: ColorDescription;
+    colorSkeletonFrom: ColorDescription;
+    colorSkeletonTo: ColorDescription;
+    colorWriteBarIcon: ColorDescription;
+    colorWriteBarInputBackground: ColorDescription;
+    colorWriteBarInputBorderAlpha: ColorDescription;
+    colorActionSheetText: ColorDescription;
+    colorTrackBackground: ColorDescription;
+    colorTrackBuffer: ColorDescription;
+    colorSearchFieldBackground: ColorDescription;
+    colorPanelHeaderIcon: ColorDescription;
     colorTransparent: ColorDescription;
-    colorBackgroundNegativeTint: ColorDescription;
-    colorFieldBackground: ColorDescription;
-    colorIconContrastSecondary: ColorDescription;
+    colorSegmentedControl: ColorDescription;
 }
 export declare type Colors = {
     [key in keyof ColorsDescriptionStruct]: ColorWithStates;

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

@@ -73,6 +73,16 @@ export interface LocalOctaviusColorsDescriptionStruct {
     colorPaletteViolet1: ColorDescription;
     colorPaletteViolet2: ColorDescription;
     colorAlert: ColorDescription;
+    colorTagBackgroundMint: ColorDescription;
+    colorTagTextMint: ColorDescription;
+    colorTagBackgroundSky: ColorDescription;
+    colorTagTextSky: ColorDescription;
+    colorTagBackgroundOrange: ColorDescription;
+    colorTagTextOrange: ColorDescription;
+    colorTagBackgroundPink: ColorDescription;
+    colorTagTextPink: ColorDescription;
+    colorTagBackgroundPurple: ColorDescription;
+    colorTagTextPurple: ColorDescription;
     octaviusColorButtonText: ColorDescription;
     octaviusColorButtonIcon: ColorDescription;
     octaviusColorButtonBackgroundAlpha: ColorDescription;

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

@@ -1,8 +1,46 @@
-import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
+import { Property } from 'csstype';
+import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
+import { Adaptive } from '../../general/tools';
+import { Font } from '../../general/typography';
+import { LocalParadigmColorsDescriptionStruct, ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
 declare type SearchViewports = ['touch', 'desktopS'];
-export interface ThemeSearch extends ParadigmTheme<SearchViewports> {
+export declare type SearchLocalGradients = {
+    searchCardBackground: string;
+    searchCardWithTextBackground: any;
+};
+export declare type SearchLocalElevations = {
+    elevation1Hover: Property.BoxShadow;
+    elevation2Hover: Property.BoxShadow;
+    elevationButtons: Property.BoxShadow;
+};
+export declare type SearchLocalFonts = {
+    searchFontSearchTitle1: Adaptive<Font>;
+    searchFontSearchTitle4: Adaptive<Font>;
+    searchFontSearchTitle4Bold: Adaptive<Font>;
+    searchFontSearchSubheadBold: Adaptive<Font>;
+    searchFontSearchFootnoteBold: Adaptive<Font>;
+    searchFontSearchFootnoteMailSans: Adaptive<Font>;
+    searchFontSearchCaption1Bold: Adaptive<Font>;
+    searchFontSearchCaption1MailSans: Adaptive<Font>;
+    searchFontSearchCaption2MailSans: Adaptive<Font>;
+    searchFontSearchTextBold: Partial<Adaptive<Font>>;
+    searchFontSearchTextMailSans: Partial<Adaptive<Font>>;
+};
+export interface LocalSearchColorsDescriptionStruct {
+    searchColorTextLinkPositive: ColorDescription;
+    searchColorTextLinkPositiveTint: ColorDescription;
+    searchColorBackgroundAccentTint: ColorDescription;
+    searchColorBackgroundOrangeAccentHover: ColorDescription;
+    searchColorBackgroundOrangeAccentActive: ColorDescription;
+    searchColorTextLinkAlternativeHover: ColorDescription;
 }
-export interface ThemeSearchDescription extends ParadigmThemeDescription<SearchViewports> {
+export declare type SearchLocalColors = {
+    [key in keyof LocalSearchColorsDescriptionStruct]: ColorWithStates;
+};
+export interface ThemeSearch extends ParadigmTheme<SearchViewports>, SearchLocalGradients, SearchLocalElevations, SearchLocalFonts, SearchLocalColors {
+}
+export interface ThemeSearchDescription extends ParadigmThemeDescription<SearchViewports>, SearchLocalGradients, SearchLocalElevations, SearchLocalFonts {
+    colors: LocalSearchColorsDescriptionStruct & LocalParadigmColorsDescriptionStruct & ColorsDescriptionStruct;
 }
 export interface ThemeSearchCssVars extends ParadigmThemeCssVars<SearchViewports, ThemeSearch> {
 }

package/package.json

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

package/themeDescriptions/base/paradigm.js

@@ -50,6 +50,9 @@ exports.lightColors = {
         colorBackgroundPositive: '#0DC268',
         colorBackgroundNegativeTint: '#FAEBEB',
         colorFieldBackground: '#ffffff',
+        colorBackgroundModalInverse: '#303030',
+        colorBackgroundContrastInverse: '#303030',
+        colorBackgroundAccentTint: '#5a9eff',
         // Text
         colorTextAccent: '#005FF9',
         colorTextAccentThemed: '#005FF9',
@@ -69,6 +72,7 @@ exports.lightColors = {
         colorTextPositive: '#0DC268',
         // Icons
         colorIconAccent: '#005FF9',
+        colorIconAccentThemed: '#005FF9',
         colorIconNegative: '#ED0A34',
         colorIconPrimary: '#2C2D2E',
         colorIconPrimaryInvariably: '#2C2D2E',
@@ -93,6 +97,8 @@ exports.lightColors = {
         colorSeparatorSecondary: '#E6E7EB',
         colorSeparatorPrimary: '#DADCE0',
         colorStrokePositive: '#0DC268',
+        colorSeparatorPrimary2x: '#CDD0D5',
+        colorSeparatorPrimary3x: '#BFC3CA',
         // Palette
         colorAccentBlue: '#005FF9',
         colorAccentGray: '#A5A7AD',
@@ -119,6 +125,7 @@ exports.lightColors = {
         colorAvatarOverlay: 'rgba(145, 147, 153, 0.48)',
         colorAvatarOverlayInverseAlpha: 'rgba(255, 255, 255, 0.85)',
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.48)',
+        colorSegmentedControl: '#FFFFFF',
         colorTransparent: 'transparent',
     },
 };
@@ -146,6 +153,9 @@ exports.darkColors = {
         colorBackgroundPositive: '#0DC268',
         colorBackgroundNegativeTint: '#522e2e',
         colorFieldBackground: '#232324',
+        colorBackgroundModalInverse: '#ffffff',
+        colorBackgroundContrastInverse: '#303030',
+        colorBackgroundAccentTint: '#5a9eff',
         // Text
         colorTextAccent: '#3C82FD',
         colorTextAccentThemed: '#FFFFFF',
@@ -165,6 +175,7 @@ exports.darkColors = {
         colorTextPositive: '#0DC268',
         // Icons
         colorIconAccent: '#3C82FD',
+        colorIconAccentThemed: '#FFFFFF',
         colorIconNegative: '#ED0A34',
         colorIconPrimary: '#D9DADD',
         colorIconPrimaryInvariably: '#2C2D2E',
@@ -188,6 +199,8 @@ exports.darkColors = {
         colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.4)',
         colorSeparatorSecondary: '#181818',
         colorSeparatorPrimary: '#151516',
+        colorSeparatorPrimary2x: '#202022',
+        colorSeparatorPrimary3x: '#2d2d2f',
         colorStrokePositive: '#0DC268',
         // Palette
         colorAccentBlue: '#2775FC',
@@ -215,6 +228,7 @@ exports.darkColors = {
         colorAvatarOverlay: 'rgba(176, 178, 182, 0.48)',
         colorAvatarOverlayInverseAlpha: 'rgba(255, 255, 255, 0.85)',
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.48)',
+        colorSegmentedControl: '#626364',
         colorTransparent: 'transparent',
     },
 };

package/themeDescriptions/base/vk.js

@@ -27,16 +27,12 @@ var colorBackgroundTertiaryDark = '#202021';
 exports.lightColors = {
     colorsScheme: 'light',
     colors: {
+        // Background
         colorBackgroundAccent: '#2688EB',
         colorBackgroundAccentThemed: '#2688EB',
+        colorBackgroundAccentTint: '#5a9eff',
         colorBackgroundAccentAlternative: '#2688EB',
-        colorIconAccent: '#2688EB',
-        colorTextAccent: '#2688EB',
-        colorTextAccentThemed: '#2688EB',
-        colorStrokeAccent: '#2688EB',
-        colorStrokeAccentThemed: '#2688EB',
-        colorStrokeContrast: '#FFFFFF',
-        colorActionSheetText: '#3F8AE0',
+        colorBackground: '#EBEDF0',
         colorBackgroundContent: '#FFFFFF',
         colorBackgroundSecondary: '#F5F5F5',
         colorBackgroundSecondaryAlpha: {
@@ -45,17 +41,37 @@ exports.lightColors = {
             active: 'rgba(0, 0, 0, 0.12)',
         },
         colorBackgroundTertiary: colorBackgroundTertiaryLight,
-        colorBackground: '#EBEDF0',
         colorBackgroundContrast: '#FFFFFF',
         colorBackgroundContrastSecondaryAlpha: 'rgba(255, 255, 255, 0.20)',
+        colorBackgroundContrastInverse: '#2d2d2e',
+        colorBackgroundModal: '#FFFFFF',
+        colorBackgroundModalInverse: '#2d2d2e',
         colorBackgroundWarning: '#FFF2D6',
+        colorBackgroundPositive: '#4BB34B',
         colorBackgroundNegative: '#E64646',
         colorBackgroundNegativeTint: '#FAEBEB',
-        colorTextNegative: '#E64646',
-        colorIconNegative: '#E64646',
-        colorStrokeNegative: '#E64646',
+        colorFieldBackground: '#f2f3f5',
         colorHeaderBackground: '#FFFFFF',
-        colorPanelHeaderIcon: '#2688EB',
+        // Text
+        colorTextAccent: '#2688EB',
+        colorTextAccentThemed: '#2688EB',
+        colorTextPrimary: '#000000',
+        colorTextPrimaryInvariably: '#000000',
+        colorTextSecondary: '#818C99',
+        colorTextSubhead: '#6D7885',
+        colorTextTertiary: '#99A2AD',
+        colorTextContrast: '#FFFFFF',
+        colorTextContrastThemed: '#FFFFFF',
+        colorTextPositive: '#4BB34B',
+        colorTextNegative: '#E64646',
+        colorTextLink: '#2D81E0',
+        colorTextLinkThemed: '#4986CC',
+        colorTextLinkVisited: '#4986CC',
+        colorTextMuted: '#2C2D2E',
+        colorLinkContrast: '#FFFFFF',
+        // Icons
+        colorIconAccent: '#2688EB',
+        colorIconAccentThemed: '#2688EB',
         colorIconPrimary: '#2C2D2E',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#818C99',
@@ -64,34 +80,29 @@ exports.lightColors = {
         colorIconSecondaryAlpha: 'rgba(0, 0, 0, 0.36)',
         colorIconTertiary: '#B8C1CC',
         colorIconTertiaryAlpha: 'rgba(0, 0, 0, 0.24)',
+        colorIconContrast: '#FFFFFF',
+        colorIconContrastThemed: '#FFFFFF',
         colorIconContrastSecondary: '#F2F3F5',
+        colorIconPositive: '#4BB34B',
+        colorIconNegative: '#E64646',
+        // Stroke
+        colorStrokeAccent: '#2688EB',
+        colorStrokeAccentThemed: '#2688EB',
+        colorSeparatorPrimary: '#D7D8D9',
+        colorSeparatorPrimary2x: '#cbcccd',
+        colorSeparatorPrimary3x: '#bebfc1',
+        colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.12)',
+        colorSeparatorSecondary: '#E1E3E6',
+        colorStrokePositive: '#4BB34B',
+        colorStrokeNegative: '#E64646',
+        colorStrokeContrast: '#FFFFFF',
         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: {
             normal: 'rgba(0, 0, 0, 0.12)',
             hover: 'rgba(0, 0, 0, 0.24)',
             active: 'rgba(0, 0, 0, 0.36)',
         },
-        colorFieldBackground: '#f2f3f5',
-        colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.12)',
-        colorSeparatorSecondary: '#E1E3E6',
-        colorSeparatorPrimary: '#D7D8D9',
-        colorTextLink: '#2D81E0',
-        colorTextLinkThemed: '#4986CC',
-        colorTextMuted: '#2C2D2E',
-        colorTextPrimary: '#000000',
-        colorTextPrimaryInvariably: '#000000',
-        colorTextSecondary: '#818C99',
-        colorTextSubhead: '#6D7885',
-        colorTextTertiary: '#99A2AD',
-        colorWriteBarIcon: '#3F8AE0',
+        // Palette
         colorAccentBlue: '#3F8AE0',
         colorAccentGray: '#A3ADB8',
         colorAccentRed: '#FF3347',
@@ -99,38 +110,36 @@ exports.lightColors = {
         colorAccentOrange: '#FFA000',
         colorAccentPurple: '#735CE6',
         colorAccentViolet: '#792EC0',
-        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(0, 0, 0, 0.6)',
+        // Other
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.4)',
-        colorTransparent: 'transparent',
+        colorAvatarOverlay: 'rgba(0, 0, 0, 0.6)',
         colorAvatarOverlayInverseAlpha: 'rgba(255, 255, 255, 0.85)',
+        colorActionSheetText: '#3F8AE0',
+        colorImagePlaceholder: '#F2F3F5',
+        colorImagePlaceholderAlpha: 'rgba(0, 28, 61, 0.08)',
+        colorSkeletonFrom: '#F5F5F5',
+        colorSkeletonTo: '#E1E3E6',
+        colorWriteBarIcon: '#3F8AE0',
+        colorWriteBarInputBackground: '#F2F3F5',
+        colorWriteBarInputBorderAlpha: 'rgba(0, 0, 0, 0.08)',
+        colorTrackBackground: '#E1E3E6',
+        colorTrackBuffer: '#A0BFE4',
+        colorSearchFieldBackground: '#EBEDF0',
+        colorPanelHeaderIcon: '#2688EB',
+        colorSegmentedControl: '#FFFFFF',
+        colorTransparent: 'transparent',
     },
 };
 exports.darkColors = {
     colorsScheme: 'dark',
     colors: {
+        // Background
         colorBackgroundAccent: '#529EF4',
         colorBackgroundAccentThemed: '#FFFFFF',
+        colorBackgroundAccentTint: '#5a9eff',
         colorBackgroundAccentAlternative: '#529EF4',
-        colorIconAccent: '#529EF4',
-        colorTextAccent: '#529EF4',
-        colorTextAccentThemed: '#FFFFFF',
-        colorStrokeAccent: '#529EF4',
-        colorStrokeAccentThemed: '#FFFFFF',
-        colorStrokeContrast: '#FFFFFF',
-        colorActionSheetText: '#529EF4',
+        colorBackground: '#0A0A0A',
         colorBackgroundContent: '#19191A',
         colorBackgroundSecondary: '#232324',
         colorBackgroundSecondaryAlpha: {
@@ -139,17 +148,37 @@ exports.darkColors = {
             active: 'rgba(255, 255, 255, 0.12)',
         },
         colorBackgroundTertiary: colorBackgroundTertiaryDark,
-        colorBackground: '#0A0A0A',
         colorBackgroundContrast: '#FFFFFF',
         colorBackgroundContrastSecondaryAlpha: 'rgba(255, 255, 255, 0.20)',
-        colorBackgroundNegative: '#FF5C5C',
+        colorBackgroundContrastInverse: '#2d2d2e',
+        colorBackgroundModal: '#2D2D2E',
+        colorBackgroundModalInverse: '#ffffff',
         colorBackgroundWarning: '#887244',
+        colorBackgroundPositive: '#4BB34B',
+        colorBackgroundNegative: '#FF5C5C',
         colorBackgroundNegativeTint: '#522E2E',
-        colorTextNegative: '#FF5C5C',
-        colorIconNegative: '#FF5C5C',
-        colorStrokeNegative: '#FF5C5C',
+        colorFieldBackground: '#292929',
         colorHeaderBackground: '#19191A',
-        colorPanelHeaderIcon: '#71AAEB',
+        // Text
+        colorTextAccent: '#529EF4',
+        colorTextAccentThemed: '#FFFFFF',
+        colorTextPrimary: '#E1E3E6',
+        colorTextPrimaryInvariably: '#000000',
+        colorTextSecondary: '#76787A',
+        colorTextSubhead: '#C1C3C6',
+        colorTextTertiary: '#636567',
+        colorTextContrast: '#FFFFFF',
+        colorTextContrastThemed: '#000000',
+        colorTextPositive: '#4BB34B',
+        colorTextNegative: '#FF5C5C',
+        colorTextLink: '#529EF4',
+        colorTextLinkThemed: '#FFFFFF',
+        colorTextLinkVisited: '#4986CC',
+        colorTextMuted: '#E1E3E6',
+        colorLinkContrast: '#FFFFFF',
+        // Icons
+        colorIconAccent: '#529EF4',
+        colorIconAccentThemed: '#FFFFFF',
         colorIconPrimary: '#E1E3E6',
         colorIconPrimaryInvariably: '#2C2D2E',
         colorIconMedium: '#B0B1B6',
@@ -158,56 +187,51 @@ exports.darkColors = {
         colorIconSecondaryAlpha: 'rgba(0, 0, 0, 0.43)',
         colorIconTertiary: '#5D5F61',
         colorIconTertiaryAlpha: 'rgba(255, 255, 255, 0.3)',
+        colorIconContrast: '#FFFFFF',
+        colorIconContrastThemed: '#000000',
         colorIconContrastSecondary: '#F2F3F5',
-        colorImageBorderAlpha: 'rgba(255, 255, 255, 0.08)',
-        colorWriteBarInputBackground: '#232324',
-        colorWriteBarInputBorderAlpha: 'rgba(255, 255, 255, 0.8)',
-        colorTrackBackground: '#454647',
-        colorTrackBuffer: '#405772',
-        colorBackgroundModal: '#2D2D2E',
-        colorImagePlaceholderAlpha: 'rgba(241, 247, 255, 0.08)',
-        colorImagePlaceholder: '#2A2B2C',
-        colorSearchFieldBackground: '#232324',
-        colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.12)',
-        colorFieldBackground: '#292929',
+        colorIconPositive: '#4BB34B',
+        colorIconNegative: '#FF5C5C',
+        // Stroke
+        colorStrokeAccent: '#529EF4',
+        colorStrokeAccentThemed: '#FFFFFF',
+        colorSeparatorPrimary: '#363738',
+        colorSeparatorPrimary2x: '#444546',
+        colorSeparatorPrimary3x: '#505253',
         colorSeparatorPrimaryAlpha: 'rgba(255, 255, 255, 0.12)',
         colorSeparatorSecondary: '#141415',
-        colorSeparatorPrimary: '#363738',
-        colorTextLink: '#529EF4',
-        colorTextLinkThemed: '#FFFFFF',
-        colorTextMuted: '#E1E3E6',
-        colorTextPrimary: '#E1E3E6',
-        colorTextPrimaryInvariably: '#000000',
-        colorTextSecondary: '#76787A',
-        colorTextSubhead: '#C1C3C6',
-        colorTextTertiary: '#636567',
-        colorWriteBarIcon: '#529EF4',
+        colorStrokePositive: '#4BB34B',
+        colorStrokeNegative: '#FF5C5C',
+        colorStrokeContrast: '#FFFFFF',
+        colorImageBorderAlpha: 'rgba(255, 255, 255, 0.08)',
+        colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.12)',
+        // Palette
         colorAccentBlue: '#529EF4',
-        // цвета ниже нужно поменять
-        // не успел сделать к релизу тёмной версии vk почты
         colorAccentGray: '#A3ADB8',
         colorAccentRed: '#FF3347',
         colorAccentGreen: '#4BB34B',
         colorAccentOrange: '#FFA000',
         colorAccentPurple: '#735CE6',
         colorAccentViolet: '#792EC0',
-        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(0, 0, 0, 0.6)',
+        // Other
         colorOverlayPrimary: 'rgba(0, 0, 0, 0.4)',
-        colorTransparent: 'transparent',
+        colorAvatarOverlay: 'rgba(0, 0, 0, 0.6)',
         colorAvatarOverlayInverseAlpha: 'rgba(255, 255, 255, 0.85)',
+        colorImagePlaceholder: '#2A2B2C',
+        colorImagePlaceholderAlpha: 'rgba(241, 247, 255, 0.08)',
+        colorSkeletonFrom: '#F5F5F5',
+        colorSkeletonTo: '#E1E3E6',
+        colorWriteBarIcon: '#529EF4',
+        colorWriteBarInputBackground: '#232324',
+        colorWriteBarInputBorderAlpha: 'rgba(255, 255, 255, 0.8)',
+        colorActionSheetText: '#529EF4',
+        colorTrackBackground: '#454647',
+        colorTrackBuffer: '#405772',
+        colorSearchFieldBackground: '#363738',
+        colorPanelHeaderIcon: '#71AAEB',
+        colorSegmentedControl: '#626364',
+        colorTransparent: 'transparent',
     },
 };
 exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), { 
@@ -518,8 +542,8 @@ exports.lightTheme = __assign(__assign({ themeName: 'vkBase', themeNameBase: 'vk
     sizeSplitColPaddingHorizontal: {
         regular: 16,
     }, 
-    // Прочие отступы
+    // Тени и другое
     elevation1: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)', elevation1InvertY: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06)', elevation2: '0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06)', elevation3: '0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08)', elevation4: '0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)', gradientBlack: getGradientPointsFromColor_1.getGradientPointsFromColor('#000000', 0.4), gradientWhite: getGradientPointsFromColor_1.getGradientPointsFromColor('#FFFFFF'), gradientTint: getGradientPointsFromColor_1.getGradientPointsFromColor(colorBackgroundTertiaryLight), 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', themeInheritsFrom: 'vkBase', colorsScheme: 'dark', 
-    // TODO: Поставить нормальные отступы из тёмной темы
-    elevation1: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)', elevation2: '0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06)', elevation3: '0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08)', elevation4: '0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)', gradientTint: getGradientPointsFromColor_1.getGradientPointsFromColor(colorBackgroundTertiaryDark) });
+    // Тени и другое (Поправить для Dark)
+    elevation1: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)', elevation1InvertY: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0, 0.06)', elevation2: '0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 4px rgba(0, 0, 0, 0.06)', elevation3: '0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08)', elevation4: '0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)', gradientTint: getGradientPointsFromColor_1.getGradientPointsFromColor(colorBackgroundTertiaryDark) });

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

@@ -415,6 +415,15 @@
 	--vkui--color_field_background: #ffffff;
 	--vkui--color_field_background--hover: #F5F5F7;
 	--vkui--color_field_background--active: #EBECEF;
+	--vkui--color_background_modal_inverse: #303030;
+	--vkui--color_background_modal_inverse--hover: #2E2F31;
+	--vkui--color_background_modal_inverse--active: #2C2D31;
+	--vkui--color_background_contrast_inverse: #303030;
+	--vkui--color_background_contrast_inverse--hover: #2E2F31;
+	--vkui--color_background_contrast_inverse--active: #2C2D31;
+	--vkui--color_background_accent_tint: #5a9eff;
+	--vkui--color_background_accent_tint--hover: #5698F7;
+	--vkui--color_background_accent_tint--active: #5393EF;
 	--vkui--color_text_accent: #005FF9;
 	--vkui--color_text_accent--hover: #005CF1;
 	--vkui--color_text_accent--active: #0059EA;
@@ -466,6 +475,9 @@
 	--vkui--color_icon_accent: #005FF9;
 	--vkui--color_icon_accent--hover: #005CF1;
 	--vkui--color_icon_accent--active: #0059EA;
+	--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;
@@ -535,6 +547,12 @@
 	--vkui--color_stroke_positive: #0DC268;
 	--vkui--color_stroke_positive--hover: #0CBB66;
 	--vkui--color_stroke_positive--active: #0CB465;
+	--vkui--color_separator_primary2x: #CDD0D5;
+	--vkui--color_separator_primary2x--hover: #C5C8CF;
+	--vkui--color_separator_primary2x--active: #BDC1C9;
+	--vkui--color_separator_primary3x: #BFC3CA;
+	--vkui--color_separator_primary3x--hover: #B7BCC4;
+	--vkui--color_separator_primary3x--active: #B0B5BF;
 	--vkui--color_accent_blue: #005FF9;
 	--vkui--color_accent_blue--hover: #005CF1;
 	--vkui--color_accent_blue--active: #0059EA;
@@ -607,6 +625,9 @@
 	--vkui--color_overlay_primary: rgba(0, 0, 0, 0.48);
 	--vkui--color_overlay_primary--hover: rgba(0, 0, 0, 0.52);
 	--vkui--color_overlay_primary--active: rgba(0, 0, 0, 0.56);
+	--vkui--color_segmented_control: #FFFFFF;
+	--vkui--color_segmented_control--hover: #F5F5F7;
+	--vkui--color_segmented_control--active: #EBECEF;
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(0, 16, 61, 0.04);
 	--vkui--color_transparent--active: rgba(0, 16, 61, 0.08);