@vkontakte/vkui-tokens 4.14.0 → 4.14.2

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,30 +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;
     colorSeparatorPrimary2x: ColorDescription;
     colorSeparatorPrimary3x: ColorDescription;
-    colorTextLink: ColorDescription;
-    colorTextLinkThemed: ColorDescription;
-    colorTextMuted: ColorDescription;
-    colorTextPrimary: ColorDescription;
-    colorTextPrimaryInvariably: ColorDescription;
-    colorTextSecondary: ColorDescription;
-    colorTextSubhead: ColorDescription;
-    colorTextTertiary: ColorDescription;
-    colorWriteBarIcon: ColorDescription;
     colorAccentBlue: ColorDescription;
     colorAccentGray: ColorDescription;
     colorAccentRed: ColorDescription;
@@ -84,29 +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;
-    colorBackgroundModalInverse: ColorDescription;
-    colorBackgroundContrastInverse: ColorDescription;
-    colorBackgroundAccentTint: ColorDescription;
+    colorSegmentedControl: ColorDescription;
 }
 export declare type Colors = {
     [key in keyof ColorsDescriptionStruct]: ColorWithStates;

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

@@ -14,7 +14,7 @@ export declare type SearchLocalElevations = {
     elevationButtons: Property.BoxShadow;
 };
 export declare type SearchLocalFonts = {
-    searchFontSearchTitle1: Adaptive<Font>;
+    searchFontSearchExtraHeadline: Adaptive<Font>;
     searchFontSearchTitle4: Adaptive<Font>;
     searchFontSearchTitle4Bold: Adaptive<Font>;
     searchFontSearchSubheadBold: Adaptive<Font>;
@@ -23,8 +23,8 @@ export declare type SearchLocalFonts = {
     searchFontSearchCaption1Bold: Adaptive<Font>;
     searchFontSearchCaption1MailSans: Adaptive<Font>;
     searchFontSearchCaption2MailSans: Adaptive<Font>;
-    searchFontSearchTextBold: Partial<Adaptive<Font>>;
-    searchFontSearchTextMailSans: Partial<Adaptive<Font>>;
+    searchFontSearchTextBold: Adaptive<Font>;
+    searchFontSearchTextMailSans: Adaptive<Font>;
 };
 export interface LocalSearchColorsDescriptionStruct {
     searchColorTextLinkPositive: ColorDescription;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.14.0",
+  "version": "4.14.2",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -21,7 +21,8 @@
     "test:ci": "jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"",
     "clear:src": "find src -name '*.d.ts' -delete &&  find src -name '*.js' -delete",
     "clear:dist": "find dist -regex '.*[^d]\\.ts' -delete",
-    "open:coverage": "open .coverage/index.html"
+    "open:coverage": "open .coverage/index.html",
+    "styleguide": "sh ./tasks/styleguide.sh"
   },
   "repository": "https://github.com/VKCOM/vkui-tokens.git",
   "dependencies": {

package/themeDescriptions/base/paradigm.js

@@ -72,6 +72,7 @@ exports.lightColors = {
         colorTextPositive: '#0DC268',
         // Icons
         colorIconAccent: '#005FF9',
+        colorIconAccentThemed: '#005FF9',
         colorIconNegative: '#ED0A34',
         colorIconPrimary: '#2C2D2E',
         colorIconPrimaryInvariably: '#2C2D2E',
@@ -124,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',
     },
 };
@@ -173,6 +175,7 @@ exports.darkColors = {
         colorTextPositive: '#0DC268',
         // Icons
         colorIconAccent: '#3C82FD',
+        colorIconAccentThemed: '#FFFFFF',
         colorIconNegative: '#ED0A34',
         colorIconPrimary: '#D9DADD',
         colorIconPrimaryInvariably: '#2C2D2E',
@@ -225,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.d.ts

@@ -1,5 +1,11 @@
 import { ColorsDescription, ThemeDescription } from '../../interfaces/general';
+import { Elevation } from '../../interfaces/general/elevation';
+import { Gradients } from '../../interfaces/general/gradients';
 export declare const lightColors: ColorsDescription;
+export declare const lightGradient: Gradients;
+export declare const lightElevation: Elevation;
 export declare const darkColors: ColorsDescription;
+export declare const darkGradient: Gradients;
+export declare const darkElevation: Elevation;
 export declare const lightTheme: ThemeDescription;
 export declare const darkTheme: ThemeDescription;

package/themeDescriptions/base/vk.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.darkTheme = exports.lightTheme = exports.darkColors = exports.lightColors = void 0;
+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 = '"TT Commons", -apple-system, system-ui, Helvetica Neue, Roboto, sans-serif';
@@ -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,36 +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',
-        colorSeparatorPrimary2x: '#cbcccd',
-        colorSeparatorPrimary3x: '#bebfc1',
-        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',
@@ -101,41 +110,48 @@ 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)',
-        colorBackgroundModalInverse: '#2d2d2e',
-        colorBackgroundContrastInverse: '#2d2d2e',
-        colorBackgroundAccentTint: '#5a9eff',
+        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.lightGradient = {
+    gradientBlack: getGradientPointsFromColor_1.getGradientPointsFromColor('#000000', 0.4),
+    gradientWhite: getGradientPointsFromColor_1.getGradientPointsFromColor('#FFFFFF'),
+    gradientTint: getGradientPointsFromColor_1.getGradientPointsFromColor(colorBackgroundTertiaryLight),
+};
+exports.lightElevation = {
+    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)',
+};
 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: {
@@ -144,17 +160,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',
@@ -163,64 +199,67 @@ 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',
-        colorSeparatorPrimaryAlpha: 'rgba(255, 255, 255, 0.12)',
-        colorSeparatorSecondary: '#141415',
+        colorIconPositive: '#4BB34B',
+        colorIconNegative: '#FF5C5C',
+        // Stroke
+        colorStrokeAccent: '#529EF4',
+        colorStrokeAccentThemed: '#FFFFFF',
         colorSeparatorPrimary: '#363738',
         colorSeparatorPrimary2x: '#444546',
         colorSeparatorPrimary3x: '#505253',
-        colorTextLink: '#529EF4',
-        colorTextLinkThemed: '#FFFFFF',
-        colorTextMuted: '#E1E3E6',
-        colorTextPrimary: '#E1E3E6',
-        colorTextPrimaryInvariably: '#000000',
-        colorTextSecondary: '#76787A',
-        colorTextSubhead: '#C1C3C6',
-        colorTextTertiary: '#636567',
-        colorWriteBarIcon: '#529EF4',
+        colorSeparatorPrimaryAlpha: 'rgba(255, 255, 255, 0.12)',
+        colorSeparatorSecondary: '#141415',
+        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)',
-        colorBackgroundModalInverse: '#ffffff',
-        colorBackgroundContrastInverse: '#2d2d2e',
-        colorBackgroundAccentTint: '#5a9eff',
+        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), { 
+exports.darkGradient = {
+    gradientBlack: getGradientPointsFromColor_1.getGradientPointsFromColor('#000000', 0.4),
+    gradientWhite: getGradientPointsFromColor_1.getGradientPointsFromColor('#FFFFFF'),
+    gradientTint: getGradientPointsFromColor_1.getGradientPointsFromColor(colorBackgroundTertiaryDark),
+};
+exports.darkElevation = {
+    // TODO: Тени (Поправить для 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)',
+};
+exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), exports.lightGradient), exports.lightElevation), { 
     // Типографика
     fontFamilyAccent: fontFamilyAccent,
     fontFamilyBase: fontFamilyBase,
@@ -528,8 +567,6 @@ 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) });
+    // Разное
+    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(__assign(__assign({}, exports.lightTheme), exports.darkColors), exports.darkGradient), exports.darkElevation), { themeName: 'vkBaseDark', themeInheritsFrom: 'vkBase', colorsScheme: 'dark' });

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

@@ -475,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;
@@ -622,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);

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

@@ -133,6 +133,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;
@@ -280,6 +283,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);

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

@@ -107,6 +107,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;
@@ -254,6 +257,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);