npm - @vkontakte/vkui-tokens - Versions diffs - 4.35.1 → 4.35.2-dev-cfbf64.0 - Mend

@vkontakte/vkui-tokens 4.35.1 → 4.35.2-dev-cfbf64.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (963) hide show

package/themes/vkontakteCom/index.less CHANGED Viewed

@@ -259,6 +259,9 @@
 @color-link-contrast: #333333;
 @color-link-contrast--hover: #313233;
 @color-link-contrast--active: #2F3034;
+@color-text-button: #346297;
+@color-text-button--hover: #325F93;
+@color-text-button--active: #305B90;
 @color-icon-accent: #447BBA;
 @color-icon-accent--hover: #4177B5;
 @color-icon-accent--active: #3F72B0;
@@ -304,6 +307,9 @@
 @color-icon-negative: #E64646;
 @color-icon-negative--hover: #DD4446;
 @color-icon-negative--active: #D44245;
+@color-icon-button: #346297;
+@color-icon-button--hover: #325F93;
+@color-icon-button--active: #305B90;
 @color-stroke-accent: #447BBA;
 @color-stroke-accent--hover: #4177B5;
 @color-stroke-accent--active: #3F72B0;
@@ -340,6 +346,9 @@
 @color-field-border-alpha: rgba(0, 0, 0, 0.12);
 @color-field-border-alpha--hover: rgba(0, 0, 0, 0.24);
 @color-field-border-alpha--active: rgba(0, 0, 0, 0.36);
+@color-stroke-button: #346297;
+@color-stroke-button--hover: #325F93;
+@color-stroke-button--active: #305B90;
 @color-accent-blue: #5181B8;
 @color-accent-blue--hover: #4E7CB3;
 @color-accent-blue--active: #4B78AE;
@@ -427,6 +436,9 @@
 @vkontakte-color-snippet-border-alpha: rgba(0, 0, 0, 0.12);
 @vkontakte-color-snippet-border-alpha--hover: rgba(0, 0, 0, 0.16);
 @vkontakte-color-snippet-border-alpha--active: rgba(0, 0, 0, 0.2);
+@vkontakte-color-snippet-background: #FFFFFF;
+@vkontakte-color-snippet-background--hover: #F5F5F7;
+@vkontakte-color-snippet-background--active: #EBECEF;
 @vkontakte-color-modal-card-border-alpha: rgba(0, 0, 0, 0);
 @vkontakte-color-modal-card-border-alpha--hover: rgba(0, 0, 0, 0.04);
 @vkontakte-color-modal-card-border-alpha--active: rgba(0, 0, 0, 0.08);
@@ -439,6 +451,144 @@
 @vkontakte-color-input-border: #D3D9DE;
 @vkontakte-color-input-border--hover: #CBD1D8;
 @vkontakte-color-input-border--active: #C2C9D1;
+@vkontakte-color-search-bar-background: #e5ebf1;
+@vkontakte-color-search-bar-background--hover: #DCE2EA;
+@vkontakte-color-search-bar-background--active: #D3D9E3;
+@vkontakte-color-search-bar-field-tint: #818c99;
+@vkontakte-color-search-bar-field-tint--hover: #7C8795;
+@vkontakte-color-search-bar-field-tint--active: #778292;
+@vkontakte-background-hover-alpha: rgba(174, 183, 194, 0.12);
+@vkontakte-background-hover-alpha--hover: rgba(174, 183, 194, 0.16);
+@vkontakte-background-hover-alpha--active: rgba(174, 183, 194, 0.2);
+@vkontakte-color-accent-alternate: #0077ff;
+@vkontakte-color-accent-alternate--hover: #0073F7;
+@vkontakte-color-accent-alternate--active: #006FEF;
+@vkontakte-color-background-suggestions: #FFFFFF;
+@vkontakte-color-background-suggestions--hover: #F5F5F7;
+@vkontakte-color-background-suggestions--active: #EBECEF;
+@vkontakte-color-background-keyboard: #dce1e6;
+@vkontakte-color-background-keyboard--hover: #D3D9DF;
+@vkontakte-color-background-keyboard--active: #CAD0D8;
+@vkontakte-color-content-placeholder-icon: #b2b2b2;
+@vkontakte-color-content-placeholder-icon--hover: #ABACAD;
+@vkontakte-color-content-placeholder-icon--active: #A4A5A9;
+@vkontakte-color-content-tint-foreground: #939393;
+@vkontakte-color-content-tint-foreground--hover: #8D8E90;
+@vkontakte-color-content-tint-foreground--active: #87898C;
+@vkontakte-color-text-name: #2a5885;
+@vkontakte-color-text-name--hover: #285582;
+@vkontakte-color-text-name--active: #27527F;
+@vkontakte-color-control-background: #edeef0;
+@vkontakte-color-control-background--hover: #E4E5E9;
+@vkontakte-color-control-background--active: #DADCE2;
+@vkontakte-color-control-foreground: #447bba;
+@vkontakte-color-control-foreground--hover: #4177B5;
+@vkontakte-color-control-foreground--active: #3F72B0;
+@vkontakte-color-control-tint-muted: #828282;
+@vkontakte-color-control-tint-muted--hover: #7D7D7F;
+@vkontakte-color-control-tint-muted--active: #78797C;
+@vkontakte-color-header-search-field-background: #edeef0;
+@vkontakte-color-header-search-field-background--hover: #E4E5E9;
+@vkontakte-color-header-search-field-background--active: #DADCE2;
+@vkontakte-color-header-search-field-tint: #818c99;
+@vkontakte-color-header-search-field-tint--hover: #7C8795;
+@vkontakte-color-header-search-field-tint--active: #778292;
+@vkontakte-color-header-tab-active-indicator: #397dcc;
+@vkontakte-color-header-tab-active-indicator--hover: #3779C6;
+@vkontakte-color-header-tab-active-indicator--active: #3474C1;
+@vkontakte-color-icon-outline-medium: #818c99;
+@vkontakte-color-icon-outline-medium--hover: #7C8795;
+@vkontakte-color-icon-outline-medium--active: #778292;
+@vkontakte-color-icon-outline-secondary: #99a2ad;
+@vkontakte-color-icon-outline-secondary--hover: #939CA9;
+@vkontakte-color-icon-outline-secondary--active: #8D96A4;
+@vkontakte-color-skeleton-shimmer-from: #FFFFFF;
+@vkontakte-color-skeleton-shimmer-from--hover: #F5F5F7;
+@vkontakte-color-skeleton-shimmer-from--active: #EBECEF;
+@vkontakte-color-alpha-skeleton-shimmer-to: transparent;
+@vkontakte-color-alpha-skeleton-shimmer-to--hover: rgba(0, 16, 61, 0.04);
+@vkontakte-color-alpha-skeleton-shimmer-to--active: rgba(0, 16, 61, 0.08);
+@vkontakte-color-loader-background: #edeef0;
+@vkontakte-color-loader-background--hover: #E4E5E9;
+@vkontakte-color-loader-background--active: #DADCE2;
+@vkontakte-color-loader-tint: #828282;
+@vkontakte-color-loader-tint--hover: #7D7D7F;
+@vkontakte-color-loader-tint--active: #78797C;
+@vkontakte-color-music-playback-icon: #000000;
+@vkontakte-color-music-playback-icon--hover: #000102;
+@vkontakte-color-music-playback-icon--active: #000105;
+@vkontakte-color-status-background: #edeef0;
+@vkontakte-color-status-background--hover: #E4E5E9;
+@vkontakte-color-status-background--active: #DADCE2;
+@vkontakte-color-placeholder-icon-foreground-primary: #99a2ad;
+@vkontakte-color-placeholder-icon-foreground-primary--hover: #939CA9;
+@vkontakte-color-placeholder-icon-foreground-primary--active: #8D96A4;
+@vkontakte-color-placeholder-icon-foreground-secondary: #aeb7c2;
+@vkontakte-color-placeholder-icon-foreground-secondary--hover: #A7B0BD;
+@vkontakte-color-placeholder-icon-foreground-secondary--active: #A0AAB7;
+@vkontakte-color-placeholder-icon-tint: #1d3a5c;
+@vkontakte-color-placeholder-icon-tint--hover: #1C385B;
+@vkontakte-color-placeholder-icon-tint--active: #1B375A;
+@vkontakte-color-poll-option-background: #447bba;
+@vkontakte-color-poll-option-background--hover: #4177B5;
+@vkontakte-color-poll-option-background--active: #3F72B0;
+@vkontakte-color-tabbar-active-icon: #447bba;
+@vkontakte-color-tabbar-active-icon--hover: #4177B5;
+@vkontakte-color-tabbar-active-icon--active: #3F72B0;
+@vkontakte-color-tabbar-background: #f7f8fa;
+@vkontakte-color-tabbar-background--hover: #EDEFF2;
+@vkontakte-color-tabbar-background--active: #E3E5EB;
+@vkontakte-color-tabbar-inactive-icon: #99a2ad;
+@vkontakte-color-tabbar-inactive-icon--hover: #939CA9;
+@vkontakte-color-tabbar-inactive-icon--active: #8D96A4;
+@vkontakte-color-tabbar-tablet-text-secondary: #818c99;
+@vkontakte-color-tabbar-tablet-text-secondary--hover: #7C8795;
+@vkontakte-color-tabbar-tablet-text-secondary--active: #778292;
+@vkontakte-color-toolbar-attach-background-from: #dce1e6;
+@vkontakte-color-toolbar-attach-background-from--hover: #D3D9DF;
+@vkontakte-color-toolbar-attach-background-from--active: #CAD0D8;
+@vkontakte-color-splash-screen-icon: #dce1e6;
+@vkontakte-color-splash-screen-icon--hover: #D3D9DF;
+@vkontakte-color-splash-screen-icon--active: #CAD0D8;
+@vkontakte-color-icon-name: #8fadc8;
+@vkontakte-color-icon-name--hover: #89A7C2;
+@vkontakte-color-icon-name--active: #84A0BD;
+@vkontakte-color-panel-tab-active-text: #4e5966;
+@vkontakte-color-panel-tab-active-text--hover: #4B5664;
+@vkontakte-color-panel-tab-active-text--active: #485363;
+@vkontakte-color-background-text-alpha: rgba(81, 129, 184, 0.2);
+@vkontakte-color-background-text-alpha--hover: rgba(81, 129, 184, 0.24);
+@vkontakte-color-background-text-alpha--active: rgba(81, 129, 184, 0.28);
+@vkontakte-color-modal-card-header-close: #000000;
+@vkontakte-color-modal-card-header-close--hover: #000102;
+@vkontakte-color-modal-card-header-close--active: #000105;
+@vkontakte-im-bubble-button-outgoing-background-alpha: rgba(255, 255, 255, 0.72);
+@vkontakte-im-bubble-button-outgoing-background-alpha--hover: rgba(255, 255, 255, 0.76);
+@vkontakte-im-bubble-button-outgoing-background-alpha--active: rgba(255, 255, 255, 0.8);
+@vkontakte-im-bubble-button-foreground: #000000;
+@vkontakte-im-bubble-button-foreground--hover: #000102;
+@vkontakte-im-bubble-button-foreground--active: #000105;
+@vkontakte-im-bubble-incoming-highlighted: #d3d9de;
+@vkontakte-im-bubble-incoming-highlighted--hover: #CBD1D8;
+@vkontakte-im-bubble-incoming-highlighted--active: #C2C9D1;
+@vkontakte-im-bubble-gift-background: #f4e7c3;
+@vkontakte-im-bubble-gift-background--hover: #EADEBE;
+@vkontakte-im-bubble-gift-background--active: #E0D6B8;
+@vkontakte-im-bubble-gift-background-highlighted: #e3d3ac;
+@vkontakte-im-bubble-gift-background-highlighted--hover: #DACBA8;
+@vkontakte-im-bubble-gift-background-highlighted--active: #D1C3A3;
+@vkontakte-im-bubble-outgoing-alternate: #FFFFFF;
+@vkontakte-im-bubble-outgoing-alternate--hover: #F5F5F7;
+@vkontakte-im-bubble-outgoing-alternate--active: #EBECEF;
+@vkontakte-im-attach-tint: #447bba;
+@vkontakte-im-attach-tint--hover: #4177B5;
+@vkontakte-im-attach-tint--active: #3F72B0;
+@vkontakte-im-reply-separator: #2a5885;
+@vkontakte-im-reply-separator--hover: #285582;
+@vkontakte-im-reply-separator--active: #27527F;
+@vkontakte-im-toolbar-voice-msg-background: #99a2ad;
+@vkontakte-im-toolbar-voice-msg-background--hover: #939CA9;
+@vkontakte-im-toolbar-voice-msg-background--active: #8D96A4;
 @vkontakte-color-im-forward-line-alpha: rgba(0, 20, 51, 0.12);
 @vkontakte-color-im-forward-line-alpha--hover: rgba(0, 20, 51, 0.16);
 @vkontakte-color-im-forward-line-alpha--active: rgba(0, 20, 51, 0.2);

package/themes/vkontakteCom/index.pcss CHANGED Viewed

@@ -260,6 +260,9 @@
 	--color-link-contrast: #333333;
 	--color-link-contrast--hover: #313233;
 	--color-link-contrast--active: #2F3034;
+	--color-text-button: #346297;
+	--color-text-button--hover: #325F93;
+	--color-text-button--active: #305B90;
 	--color-icon-accent: #447BBA;
 	--color-icon-accent--hover: #4177B5;
 	--color-icon-accent--active: #3F72B0;
@@ -305,6 +308,9 @@
 	--color-icon-negative: #E64646;
 	--color-icon-negative--hover: #DD4446;
 	--color-icon-negative--active: #D44245;
+	--color-icon-button: #346297;
+	--color-icon-button--hover: #325F93;
+	--color-icon-button--active: #305B90;
 	--color-stroke-accent: #447BBA;
 	--color-stroke-accent--hover: #4177B5;
 	--color-stroke-accent--active: #3F72B0;
@@ -341,6 +347,9 @@
 	--color-field-border-alpha: rgba(0, 0, 0, 0.12);
 	--color-field-border-alpha--hover: rgba(0, 0, 0, 0.24);
 	--color-field-border-alpha--active: rgba(0, 0, 0, 0.36);
+	--color-stroke-button: #346297;
+	--color-stroke-button--hover: #325F93;
+	--color-stroke-button--active: #305B90;
 	--color-accent-blue: #5181B8;
 	--color-accent-blue--hover: #4E7CB3;
 	--color-accent-blue--active: #4B78AE;
@@ -428,6 +437,9 @@
 	--vkontakte-color-snippet-border-alpha: rgba(0, 0, 0, 0.12);
 	--vkontakte-color-snippet-border-alpha--hover: rgba(0, 0, 0, 0.16);
 	--vkontakte-color-snippet-border-alpha--active: rgba(0, 0, 0, 0.2);
+	--vkontakte-color-snippet-background: #FFFFFF;
+	--vkontakte-color-snippet-background--hover: #F5F5F7;
+	--vkontakte-color-snippet-background--active: #EBECEF;
 	--vkontakte-color-modal-card-border-alpha: rgba(0, 0, 0, 0);
 	--vkontakte-color-modal-card-border-alpha--hover: rgba(0, 0, 0, 0.04);
 	--vkontakte-color-modal-card-border-alpha--active: rgba(0, 0, 0, 0.08);
@@ -440,6 +452,144 @@
 	--vkontakte-color-input-border: #D3D9DE;
 	--vkontakte-color-input-border--hover: #CBD1D8;
 	--vkontakte-color-input-border--active: #C2C9D1;
+	--vkontakte-color-search-bar-background: #e5ebf1;
+	--vkontakte-color-search-bar-background--hover: #DCE2EA;
+	--vkontakte-color-search-bar-background--active: #D3D9E3;
+	--vkontakte-color-search-bar-field-tint: #818c99;
+	--vkontakte-color-search-bar-field-tint--hover: #7C8795;
+	--vkontakte-color-search-bar-field-tint--active: #778292;
+	--vkontakte-background-hover-alpha: rgba(174, 183, 194, 0.12);
+	--vkontakte-background-hover-alpha--hover: rgba(174, 183, 194, 0.16);
+	--vkontakte-background-hover-alpha--active: rgba(174, 183, 194, 0.2);
+	--vkontakte-color-accent-alternate: #0077ff;
+	--vkontakte-color-accent-alternate--hover: #0073F7;
+	--vkontakte-color-accent-alternate--active: #006FEF;
+	--vkontakte-color-background-suggestions: #FFFFFF;
+	--vkontakte-color-background-suggestions--hover: #F5F5F7;
+	--vkontakte-color-background-suggestions--active: #EBECEF;
+	--vkontakte-color-background-keyboard: #dce1e6;
+	--vkontakte-color-background-keyboard--hover: #D3D9DF;
+	--vkontakte-color-background-keyboard--active: #CAD0D8;
+	--vkontakte-color-content-placeholder-icon: #b2b2b2;
+	--vkontakte-color-content-placeholder-icon--hover: #ABACAD;
+	--vkontakte-color-content-placeholder-icon--active: #A4A5A9;
+	--vkontakte-color-content-tint-foreground: #939393;
+	--vkontakte-color-content-tint-foreground--hover: #8D8E90;
+	--vkontakte-color-content-tint-foreground--active: #87898C;
+	--vkontakte-color-text-name: #2a5885;
+	--vkontakte-color-text-name--hover: #285582;
+	--vkontakte-color-text-name--active: #27527F;
+	--vkontakte-color-control-background: #edeef0;
+	--vkontakte-color-control-background--hover: #E4E5E9;
+	--vkontakte-color-control-background--active: #DADCE2;
+	--vkontakte-color-control-foreground: #447bba;
+	--vkontakte-color-control-foreground--hover: #4177B5;
+	--vkontakte-color-control-foreground--active: #3F72B0;
+	--vkontakte-color-control-tint-muted: #828282;
+	--vkontakte-color-control-tint-muted--hover: #7D7D7F;
+	--vkontakte-color-control-tint-muted--active: #78797C;
+	--vkontakte-color-header-search-field-background: #edeef0;
+	--vkontakte-color-header-search-field-background--hover: #E4E5E9;
+	--vkontakte-color-header-search-field-background--active: #DADCE2;
+	--vkontakte-color-header-search-field-tint: #818c99;
+	--vkontakte-color-header-search-field-tint--hover: #7C8795;
+	--vkontakte-color-header-search-field-tint--active: #778292;
+	--vkontakte-color-header-tab-active-indicator: #397dcc;
+	--vkontakte-color-header-tab-active-indicator--hover: #3779C6;
+	--vkontakte-color-header-tab-active-indicator--active: #3474C1;
+	--vkontakte-color-icon-outline-medium: #818c99;
+	--vkontakte-color-icon-outline-medium--hover: #7C8795;
+	--vkontakte-color-icon-outline-medium--active: #778292;
+	--vkontakte-color-icon-outline-secondary: #99a2ad;
+	--vkontakte-color-icon-outline-secondary--hover: #939CA9;
+	--vkontakte-color-icon-outline-secondary--active: #8D96A4;
+	--vkontakte-color-skeleton-shimmer-from: #FFFFFF;
+	--vkontakte-color-skeleton-shimmer-from--hover: #F5F5F7;
+	--vkontakte-color-skeleton-shimmer-from--active: #EBECEF;
+	--vkontakte-color-alpha-skeleton-shimmer-to: transparent;
+	--vkontakte-color-alpha-skeleton-shimmer-to--hover: rgba(0, 16, 61, 0.04);
+	--vkontakte-color-alpha-skeleton-shimmer-to--active: rgba(0, 16, 61, 0.08);
+	--vkontakte-color-loader-background: #edeef0;
+	--vkontakte-color-loader-background--hover: #E4E5E9;
+	--vkontakte-color-loader-background--active: #DADCE2;
+	--vkontakte-color-loader-tint: #828282;
+	--vkontakte-color-loader-tint--hover: #7D7D7F;
+	--vkontakte-color-loader-tint--active: #78797C;
+	--vkontakte-color-music-playback-icon: #000000;
+	--vkontakte-color-music-playback-icon--hover: #000102;
+	--vkontakte-color-music-playback-icon--active: #000105;
+	--vkontakte-color-status-background: #edeef0;
+	--vkontakte-color-status-background--hover: #E4E5E9;
+	--vkontakte-color-status-background--active: #DADCE2;
+	--vkontakte-color-placeholder-icon-foreground-primary: #99a2ad;
+	--vkontakte-color-placeholder-icon-foreground-primary--hover: #939CA9;
+	--vkontakte-color-placeholder-icon-foreground-primary--active: #8D96A4;
+	--vkontakte-color-placeholder-icon-foreground-secondary: #aeb7c2;
+	--vkontakte-color-placeholder-icon-foreground-secondary--hover: #A7B0BD;
+	--vkontakte-color-placeholder-icon-foreground-secondary--active: #A0AAB7;
+	--vkontakte-color-placeholder-icon-tint: #1d3a5c;
+	--vkontakte-color-placeholder-icon-tint--hover: #1C385B;
+	--vkontakte-color-placeholder-icon-tint--active: #1B375A;
+	--vkontakte-color-poll-option-background: #447bba;
+	--vkontakte-color-poll-option-background--hover: #4177B5;
+	--vkontakte-color-poll-option-background--active: #3F72B0;
+	--vkontakte-color-tabbar-active-icon: #447bba;
+	--vkontakte-color-tabbar-active-icon--hover: #4177B5;
+	--vkontakte-color-tabbar-active-icon--active: #3F72B0;
+	--vkontakte-color-tabbar-background: #f7f8fa;
+	--vkontakte-color-tabbar-background--hover: #EDEFF2;
+	--vkontakte-color-tabbar-background--active: #E3E5EB;
+	--vkontakte-color-tabbar-inactive-icon: #99a2ad;
+	--vkontakte-color-tabbar-inactive-icon--hover: #939CA9;
+	--vkontakte-color-tabbar-inactive-icon--active: #8D96A4;
+	--vkontakte-color-tabbar-tablet-text-secondary: #818c99;
+	--vkontakte-color-tabbar-tablet-text-secondary--hover: #7C8795;
+	--vkontakte-color-tabbar-tablet-text-secondary--active: #778292;
+	--vkontakte-color-toolbar-attach-background-from: #dce1e6;
+	--vkontakte-color-toolbar-attach-background-from--hover: #D3D9DF;
+	--vkontakte-color-toolbar-attach-background-from--active: #CAD0D8;
+	--vkontakte-color-splash-screen-icon: #dce1e6;
+	--vkontakte-color-splash-screen-icon--hover: #D3D9DF;
+	--vkontakte-color-splash-screen-icon--active: #CAD0D8;
+	--vkontakte-color-icon-name: #8fadc8;
+	--vkontakte-color-icon-name--hover: #89A7C2;
+	--vkontakte-color-icon-name--active: #84A0BD;
+	--vkontakte-color-panel-tab-active-text: #4e5966;
+	--vkontakte-color-panel-tab-active-text--hover: #4B5664;
+	--vkontakte-color-panel-tab-active-text--active: #485363;
+	--vkontakte-color-background-text-alpha: rgba(81, 129, 184, 0.2);
+	--vkontakte-color-background-text-alpha--hover: rgba(81, 129, 184, 0.24);
+	--vkontakte-color-background-text-alpha--active: rgba(81, 129, 184, 0.28);
+	--vkontakte-color-modal-card-header-close: #000000;
+	--vkontakte-color-modal-card-header-close--hover: #000102;
+	--vkontakte-color-modal-card-header-close--active: #000105;
+	--vkontakte-im-bubble-button-outgoing-background-alpha: rgba(255, 255, 255, 0.72);
+	--vkontakte-im-bubble-button-outgoing-background-alpha--hover: rgba(255, 255, 255, 0.76);
+	--vkontakte-im-bubble-button-outgoing-background-alpha--active: rgba(255, 255, 255, 0.8);
+	--vkontakte-im-bubble-button-foreground: #000000;
+	--vkontakte-im-bubble-button-foreground--hover: #000102;
+	--vkontakte-im-bubble-button-foreground--active: #000105;
+	--vkontakte-im-bubble-incoming-highlighted: #d3d9de;
+	--vkontakte-im-bubble-incoming-highlighted--hover: #CBD1D8;
+	--vkontakte-im-bubble-incoming-highlighted--active: #C2C9D1;
+	--vkontakte-im-bubble-gift-background: #f4e7c3;
+	--vkontakte-im-bubble-gift-background--hover: #EADEBE;
+	--vkontakte-im-bubble-gift-background--active: #E0D6B8;
+	--vkontakte-im-bubble-gift-background-highlighted: #e3d3ac;
+	--vkontakte-im-bubble-gift-background-highlighted--hover: #DACBA8;
+	--vkontakte-im-bubble-gift-background-highlighted--active: #D1C3A3;
+	--vkontakte-im-bubble-outgoing-alternate: #FFFFFF;
+	--vkontakte-im-bubble-outgoing-alternate--hover: #F5F5F7;
+	--vkontakte-im-bubble-outgoing-alternate--active: #EBECEF;
+	--vkontakte-im-attach-tint: #447bba;
+	--vkontakte-im-attach-tint--hover: #4177B5;
+	--vkontakte-im-attach-tint--active: #3F72B0;
+	--vkontakte-im-reply-separator: #2a5885;
+	--vkontakte-im-reply-separator--hover: #285582;
+	--vkontakte-im-reply-separator--active: #27527F;
+	--vkontakte-im-toolbar-voice-msg-background: #99a2ad;
+	--vkontakte-im-toolbar-voice-msg-background--hover: #939CA9;
+	--vkontakte-im-toolbar-voice-msg-background--active: #8D96A4;
 	--vkontakte-color-im-forward-line-alpha: rgba(0, 20, 51, 0.12);
 	--vkontakte-color-im-forward-line-alpha--hover: rgba(0, 20, 51, 0.16);
 	--vkontakte-color-im-forward-line-alpha--active: rgba(0, 20, 51, 0.2);

package/themes/vkontakteCom/index.scss CHANGED Viewed

@@ -259,6 +259,9 @@ $color-text-muted--active: #2F3034;
 $color-link-contrast: #333333;
 $color-link-contrast--hover: #313233;
 $color-link-contrast--active: #2F3034;
+$color-text-button: #346297;
+$color-text-button--hover: #325F93;
+$color-text-button--active: #305B90;
 $color-icon-accent: #447BBA;
 $color-icon-accent--hover: #4177B5;
 $color-icon-accent--active: #3F72B0;
@@ -304,6 +307,9 @@ $color-icon-positive--active: #45A64A;
 $color-icon-negative: #E64646;
 $color-icon-negative--hover: #DD4446;
 $color-icon-negative--active: #D44245;
+$color-icon-button: #346297;
+$color-icon-button--hover: #325F93;
+$color-icon-button--active: #305B90;
 $color-stroke-accent: #447BBA;
 $color-stroke-accent--hover: #4177B5;
 $color-stroke-accent--active: #3F72B0;
@@ -340,6 +346,9 @@ $color-image-border-alpha--active: rgba(0, 0, 0, 0.16);
 $color-field-border-alpha: rgba(0, 0, 0, 0.12);
 $color-field-border-alpha--hover: rgba(0, 0, 0, 0.24);
 $color-field-border-alpha--active: rgba(0, 0, 0, 0.36);
+$color-stroke-button: #346297;
+$color-stroke-button--hover: #325F93;
+$color-stroke-button--active: #305B90;
 $color-accent-blue: #5181B8;
 $color-accent-blue--hover: #4E7CB3;
 $color-accent-blue--active: #4B78AE;
@@ -427,6 +436,9 @@ $color-transparent--active: rgba(0, 16, 61, 0.08);
 $vkontakte-color-snippet-border-alpha: rgba(0, 0, 0, 0.12);
 $vkontakte-color-snippet-border-alpha--hover: rgba(0, 0, 0, 0.16);
 $vkontakte-color-snippet-border-alpha--active: rgba(0, 0, 0, 0.2);
+$vkontakte-color-snippet-background: #FFFFFF;
+$vkontakte-color-snippet-background--hover: #F5F5F7;
+$vkontakte-color-snippet-background--active: #EBECEF;
 $vkontakte-color-modal-card-border-alpha: rgba(0, 0, 0, 0);
 $vkontakte-color-modal-card-border-alpha--hover: rgba(0, 0, 0, 0.04);
 $vkontakte-color-modal-card-border-alpha--active: rgba(0, 0, 0, 0.08);
@@ -439,6 +451,144 @@ $vkontakte-color-action-sheet-separator-alpha--active: rgba(0, 0, 0, 0.2);
 $vkontakte-color-input-border: #D3D9DE;
 $vkontakte-color-input-border--hover: #CBD1D8;
 $vkontakte-color-input-border--active: #C2C9D1;
+$vkontakte-color-search-bar-background: #e5ebf1;
+$vkontakte-color-search-bar-background--hover: #DCE2EA;
+$vkontakte-color-search-bar-background--active: #D3D9E3;
+$vkontakte-color-search-bar-field-tint: #818c99;
+$vkontakte-color-search-bar-field-tint--hover: #7C8795;
+$vkontakte-color-search-bar-field-tint--active: #778292;
+$vkontakte-background-hover-alpha: rgba(174, 183, 194, 0.12);
+$vkontakte-background-hover-alpha--hover: rgba(174, 183, 194, 0.16);
+$vkontakte-background-hover-alpha--active: rgba(174, 183, 194, 0.2);
+$vkontakte-color-accent-alternate: #0077ff;
+$vkontakte-color-accent-alternate--hover: #0073F7;
+$vkontakte-color-accent-alternate--active: #006FEF;
+$vkontakte-color-background-suggestions: #FFFFFF;
+$vkontakte-color-background-suggestions--hover: #F5F5F7;
+$vkontakte-color-background-suggestions--active: #EBECEF;
+$vkontakte-color-background-keyboard: #dce1e6;
+$vkontakte-color-background-keyboard--hover: #D3D9DF;
+$vkontakte-color-background-keyboard--active: #CAD0D8;
+$vkontakte-color-content-placeholder-icon: #b2b2b2;
+$vkontakte-color-content-placeholder-icon--hover: #ABACAD;
+$vkontakte-color-content-placeholder-icon--active: #A4A5A9;
+$vkontakte-color-content-tint-foreground: #939393;
+$vkontakte-color-content-tint-foreground--hover: #8D8E90;
+$vkontakte-color-content-tint-foreground--active: #87898C;
+$vkontakte-color-text-name: #2a5885;
+$vkontakte-color-text-name--hover: #285582;
+$vkontakte-color-text-name--active: #27527F;
+$vkontakte-color-control-background: #edeef0;
+$vkontakte-color-control-background--hover: #E4E5E9;
+$vkontakte-color-control-background--active: #DADCE2;
+$vkontakte-color-control-foreground: #447bba;
+$vkontakte-color-control-foreground--hover: #4177B5;
+$vkontakte-color-control-foreground--active: #3F72B0;
+$vkontakte-color-control-tint-muted: #828282;
+$vkontakte-color-control-tint-muted--hover: #7D7D7F;
+$vkontakte-color-control-tint-muted--active: #78797C;
+$vkontakte-color-header-search-field-background: #edeef0;
+$vkontakte-color-header-search-field-background--hover: #E4E5E9;
+$vkontakte-color-header-search-field-background--active: #DADCE2;
+$vkontakte-color-header-search-field-tint: #818c99;
+$vkontakte-color-header-search-field-tint--hover: #7C8795;
+$vkontakte-color-header-search-field-tint--active: #778292;
+$vkontakte-color-header-tab-active-indicator: #397dcc;
+$vkontakte-color-header-tab-active-indicator--hover: #3779C6;
+$vkontakte-color-header-tab-active-indicator--active: #3474C1;
+$vkontakte-color-icon-outline-medium: #818c99;
+$vkontakte-color-icon-outline-medium--hover: #7C8795;
+$vkontakte-color-icon-outline-medium--active: #778292;
+$vkontakte-color-icon-outline-secondary: #99a2ad;
+$vkontakte-color-icon-outline-secondary--hover: #939CA9;
+$vkontakte-color-icon-outline-secondary--active: #8D96A4;
+$vkontakte-color-skeleton-shimmer-from: #FFFFFF;
+$vkontakte-color-skeleton-shimmer-from--hover: #F5F5F7;
+$vkontakte-color-skeleton-shimmer-from--active: #EBECEF;
+$vkontakte-color-alpha-skeleton-shimmer-to: transparent;
+$vkontakte-color-alpha-skeleton-shimmer-to--hover: rgba(0, 16, 61, 0.04);
+$vkontakte-color-alpha-skeleton-shimmer-to--active: rgba(0, 16, 61, 0.08);
+$vkontakte-color-loader-background: #edeef0;
+$vkontakte-color-loader-background--hover: #E4E5E9;
+$vkontakte-color-loader-background--active: #DADCE2;
+$vkontakte-color-loader-tint: #828282;
+$vkontakte-color-loader-tint--hover: #7D7D7F;
+$vkontakte-color-loader-tint--active: #78797C;
+$vkontakte-color-music-playback-icon: #000000;
+$vkontakte-color-music-playback-icon--hover: #000102;
+$vkontakte-color-music-playback-icon--active: #000105;
+$vkontakte-color-status-background: #edeef0;
+$vkontakte-color-status-background--hover: #E4E5E9;
+$vkontakte-color-status-background--active: #DADCE2;
+$vkontakte-color-placeholder-icon-foreground-primary: #99a2ad;
+$vkontakte-color-placeholder-icon-foreground-primary--hover: #939CA9;
+$vkontakte-color-placeholder-icon-foreground-primary--active: #8D96A4;
+$vkontakte-color-placeholder-icon-foreground-secondary: #aeb7c2;
+$vkontakte-color-placeholder-icon-foreground-secondary--hover: #A7B0BD;
+$vkontakte-color-placeholder-icon-foreground-secondary--active: #A0AAB7;
+$vkontakte-color-placeholder-icon-tint: #1d3a5c;
+$vkontakte-color-placeholder-icon-tint--hover: #1C385B;
+$vkontakte-color-placeholder-icon-tint--active: #1B375A;
+$vkontakte-color-poll-option-background: #447bba;
+$vkontakte-color-poll-option-background--hover: #4177B5;
+$vkontakte-color-poll-option-background--active: #3F72B0;
+$vkontakte-color-tabbar-active-icon: #447bba;
+$vkontakte-color-tabbar-active-icon--hover: #4177B5;
+$vkontakte-color-tabbar-active-icon--active: #3F72B0;
+$vkontakte-color-tabbar-background: #f7f8fa;
+$vkontakte-color-tabbar-background--hover: #EDEFF2;
+$vkontakte-color-tabbar-background--active: #E3E5EB;
+$vkontakte-color-tabbar-inactive-icon: #99a2ad;
+$vkontakte-color-tabbar-inactive-icon--hover: #939CA9;
+$vkontakte-color-tabbar-inactive-icon--active: #8D96A4;
+$vkontakte-color-tabbar-tablet-text-secondary: #818c99;
+$vkontakte-color-tabbar-tablet-text-secondary--hover: #7C8795;
+$vkontakte-color-tabbar-tablet-text-secondary--active: #778292;
+$vkontakte-color-toolbar-attach-background-from: #dce1e6;
+$vkontakte-color-toolbar-attach-background-from--hover: #D3D9DF;
+$vkontakte-color-toolbar-attach-background-from--active: #CAD0D8;
+$vkontakte-color-splash-screen-icon: #dce1e6;
+$vkontakte-color-splash-screen-icon--hover: #D3D9DF;
+$vkontakte-color-splash-screen-icon--active: #CAD0D8;
+$vkontakte-color-icon-name: #8fadc8;
+$vkontakte-color-icon-name--hover: #89A7C2;
+$vkontakte-color-icon-name--active: #84A0BD;
+$vkontakte-color-panel-tab-active-text: #4e5966;
+$vkontakte-color-panel-tab-active-text--hover: #4B5664;
+$vkontakte-color-panel-tab-active-text--active: #485363;
+$vkontakte-color-background-text-alpha: rgba(81, 129, 184, 0.2);
+$vkontakte-color-background-text-alpha--hover: rgba(81, 129, 184, 0.24);
+$vkontakte-color-background-text-alpha--active: rgba(81, 129, 184, 0.28);
+$vkontakte-color-modal-card-header-close: #000000;
+$vkontakte-color-modal-card-header-close--hover: #000102;
+$vkontakte-color-modal-card-header-close--active: #000105;
+$vkontakte-im-bubble-button-outgoing-background-alpha: rgba(255, 255, 255, 0.72);
+$vkontakte-im-bubble-button-outgoing-background-alpha--hover: rgba(255, 255, 255, 0.76);
+$vkontakte-im-bubble-button-outgoing-background-alpha--active: rgba(255, 255, 255, 0.8);
+$vkontakte-im-bubble-button-foreground: #000000;
+$vkontakte-im-bubble-button-foreground--hover: #000102;
+$vkontakte-im-bubble-button-foreground--active: #000105;
+$vkontakte-im-bubble-incoming-highlighted: #d3d9de;
+$vkontakte-im-bubble-incoming-highlighted--hover: #CBD1D8;
+$vkontakte-im-bubble-incoming-highlighted--active: #C2C9D1;
+$vkontakte-im-bubble-gift-background: #f4e7c3;
+$vkontakte-im-bubble-gift-background--hover: #EADEBE;
+$vkontakte-im-bubble-gift-background--active: #E0D6B8;
+$vkontakte-im-bubble-gift-background-highlighted: #e3d3ac;
+$vkontakte-im-bubble-gift-background-highlighted--hover: #DACBA8;
+$vkontakte-im-bubble-gift-background-highlighted--active: #D1C3A3;
+$vkontakte-im-bubble-outgoing-alternate: #FFFFFF;
+$vkontakte-im-bubble-outgoing-alternate--hover: #F5F5F7;
+$vkontakte-im-bubble-outgoing-alternate--active: #EBECEF;
+$vkontakte-im-attach-tint: #447bba;
+$vkontakte-im-attach-tint--hover: #4177B5;
+$vkontakte-im-attach-tint--active: #3F72B0;
+$vkontakte-im-reply-separator: #2a5885;
+$vkontakte-im-reply-separator--hover: #285582;
+$vkontakte-im-reply-separator--active: #27527F;
+$vkontakte-im-toolbar-voice-msg-background: #99a2ad;
+$vkontakte-im-toolbar-voice-msg-background--hover: #939CA9;
+$vkontakte-im-toolbar-voice-msg-background--active: #8D96A4;
 $vkontakte-color-im-forward-line-alpha: rgba(0, 20, 51, 0.12);
 $vkontakte-color-im-forward-line-alpha--hover: rgba(0, 20, 51, 0.16);
 $vkontakte-color-im-forward-line-alpha--active: rgba(0, 20, 51, 0.2);