@vkontakte/vkui-tokens 4.14.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,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/package.json

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

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.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,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,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)',
-        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.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 +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',
@@ -163,61 +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',
-        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), { 
@@ -528,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

@@ -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);