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/vkontakteComDark/index.less CHANGED Viewed

@@ -220,9 +220,9 @@
 @color-text-primary-invariably: #333333;
 @color-text-primary-invariably--hover: #3B3B3B;
 @color-text-primary-invariably--active: #434343;
-@color-text-secondary: #B2B2B2;
-@color-text-secondary--hover: #B5B5B5;
-@color-text-secondary--active: #B8B8B8;
+@color-text-secondary: #828282;
+@color-text-secondary--hover: #878787;
+@color-text-secondary--active: #8C8C8C;
 @color-text-subhead: #939393;
 @color-text-subhead--hover: #979797;
 @color-text-subhead--active: #9C9C9C;
@@ -259,6 +259,9 @@
 @color-link-contrast: #CCCCCC;
 @color-link-contrast--hover: #CECECE;
 @color-link-contrast--active: #D0D0D0;
+@color-text-button: #E1E3E6;
+@color-text-button--hover: #E2E4E7;
+@color-text-button--active: #E3E5E8;
 @color-icon-accent: #71AAEB;
 @color-icon-accent--hover: #77ADEC;
 @color-icon-accent--active: #7CB1ED;
@@ -304,6 +307,9 @@
 @color-icon-negative: #FF5C5C;
 @color-icon-negative--hover: #FF6363;
 @color-icon-negative--active: #FF6969;
+@color-icon-button: #E1E3E6;
+@color-icon-button--hover: #E2E4E7;
+@color-icon-button--active: #E3E5E8;
 @color-stroke-accent: #71AAEB;
 @color-stroke-accent--hover: #77ADEC;
 @color-stroke-accent--active: #7CB1ED;
@@ -340,6 +346,9 @@
 @color-field-border-alpha: rgba(255, 255, 255, 0.12);
 @color-field-border-alpha--hover: rgba(255, 255, 255, 0.16);
 @color-field-border-alpha--active: rgba(255, 255, 255, 0.2);
+@color-stroke-button: #E1E3E6;
+@color-stroke-button--hover: #E2E4E7;
+@color-stroke-button--active: #E3E5E8;
 @color-accent-blue: #397DCC;
 @color-accent-blue--hover: #4182CE;
 @color-accent-blue--active: #4987D0;
@@ -427,6 +436,9 @@
 @vkontakte-color-snippet-border-alpha: rgba(255, 255, 255, 0.16);
 @vkontakte-color-snippet-border-alpha--hover: rgba(255, 255, 255, 0.2);
 @vkontakte-color-snippet-border-alpha--active: rgba(255, 255, 255, 0.24);
+@vkontakte-color-snippet-background: #272727;
+@vkontakte-color-snippet-background--hover: #303030;
+@vkontakte-color-snippet-background--active: #383838;
 @vkontakte-color-modal-card-border-alpha: rgba(255, 255, 255, 0.12);
 @vkontakte-color-modal-card-border-alpha--hover: rgba(255, 255, 255, 0.16);
 @vkontakte-color-modal-card-border-alpha--active: rgba(255, 255, 255, 0.2);
@@ -439,6 +451,144 @@
 @vkontakte-color-input-border: #555555;
 @vkontakte-color-input-border--hover: #5C5C5C;
 @vkontakte-color-input-border--active: #636363;
+@vkontakte-color-search-bar-background: #222222;
+@vkontakte-color-search-bar-background--hover: #2B2B2B;
+@vkontakte-color-search-bar-background--active: #343434;
+@vkontakte-color-search-bar-field-tint: #b2b2b2;
+@vkontakte-color-search-bar-field-tint--hover: #B5B5B5;
+@vkontakte-color-search-bar-field-tint--active: #B8B8B8;
+@vkontakte-background-hover-alpha: rgba(255, 255, 255, 0.08);
+@vkontakte-background-hover-alpha--hover: rgba(255, 255, 255, 0.12);
+@vkontakte-background-hover-alpha--active: rgba(255, 255, 255, 0.16);
+@vkontakte-color-accent-alternate: #FFFFFF;
+@vkontakte-color-accent-alternate--hover: #EBEDF0;
+@vkontakte-color-accent-alternate--active: #D7D8DB;
+@vkontakte-color-background-suggestions: #333333;
+@vkontakte-color-background-suggestions--hover: #3B3B3B;
+@vkontakte-color-background-suggestions--active: #434343;
+@vkontakte-color-background-keyboard: #333333;
+@vkontakte-color-background-keyboard--hover: #3B3B3B;
+@vkontakte-color-background-keyboard--active: #434343;
+@vkontakte-color-content-placeholder-icon: #b2b2b2;
+@vkontakte-color-content-placeholder-icon--hover: #B5B5B5;
+@vkontakte-color-content-placeholder-icon--active: #B8B8B8;
+@vkontakte-color-content-tint-foreground: #939393;
+@vkontakte-color-content-tint-foreground--hover: #979797;
+@vkontakte-color-content-tint-foreground--active: #9C9C9C;
+@vkontakte-color-text-name: #e1e3e6;
+@vkontakte-color-text-name--hover: #E2E4E7;
+@vkontakte-color-text-name--active: #E3E5E8;
+@vkontakte-color-control-background: #555555;
+@vkontakte-color-control-background--hover: #5C5C5C;
+@vkontakte-color-control-background--active: #636363;
+@vkontakte-color-control-foreground: #e1e3e6;
+@vkontakte-color-control-foreground--hover: #E2E4E7;
+@vkontakte-color-control-foreground--active: #E3E5E8;
+@vkontakte-color-control-tint-muted: #939393;
+@vkontakte-color-control-tint-muted--hover: #979797;
+@vkontakte-color-control-tint-muted--active: #9C9C9C;
+@vkontakte-color-header-search-field-background: #424242;
+@vkontakte-color-header-search-field-background--hover: #4A4A4A;
+@vkontakte-color-header-search-field-background--active: #515151;
+@vkontakte-color-header-search-field-tint: #b2b2b2;
+@vkontakte-color-header-search-field-tint--hover: #B5B5B5;
+@vkontakte-color-header-search-field-tint--active: #B8B8B8;
+@vkontakte-color-header-tab-active-indicator: #397dcc;
+@vkontakte-color-header-tab-active-indicator--hover: #4182CE;
+@vkontakte-color-header-tab-active-indicator--active: #4987D0;
+@vkontakte-color-icon-outline-medium: #b2b2b2;
+@vkontakte-color-icon-outline-medium--hover: #B5B5B5;
+@vkontakte-color-icon-outline-medium--active: #B8B8B8;
+@vkontakte-color-icon-outline-secondary: #939393;
+@vkontakte-color-icon-outline-secondary--hover: #979797;
+@vkontakte-color-icon-outline-secondary--active: #9C9C9C;
+@vkontakte-color-skeleton-shimmer-from: #222222;
+@vkontakte-color-skeleton-shimmer-from--hover: #2B2B2B;
+@vkontakte-color-skeleton-shimmer-from--active: #343434;
+@vkontakte-color-alpha-skeleton-shimmer-to: transparent;
+@vkontakte-color-alpha-skeleton-shimmer-to--hover: rgba(255, 255, 255, 0.04);
+@vkontakte-color-alpha-skeleton-shimmer-to--active: rgba(255, 255, 255, 0.08);
+@vkontakte-color-loader-background: #555555;
+@vkontakte-color-loader-background--hover: #5C5C5C;
+@vkontakte-color-loader-background--active: #636363;
+@vkontakte-color-loader-tint: #828282;
+@vkontakte-color-loader-tint--hover: #878787;
+@vkontakte-color-loader-tint--active: #8C8C8C;
+@vkontakte-color-music-playback-icon: #FFFFFF;
+@vkontakte-color-music-playback-icon--hover: #EBEDF0;
+@vkontakte-color-music-playback-icon--active: #D7D8DB;
+@vkontakte-color-status-background: #222222;
+@vkontakte-color-status-background--hover: #2B2B2B;
+@vkontakte-color-status-background--active: #343434;
+@vkontakte-color-placeholder-icon-foreground-primary: #939393;
+@vkontakte-color-placeholder-icon-foreground-primary--hover: #979797;
+@vkontakte-color-placeholder-icon-foreground-primary--active: #9C9C9C;
+@vkontakte-color-placeholder-icon-foreground-secondary: #656565;
+@vkontakte-color-placeholder-icon-foreground-secondary--hover: #6B6B6B;
+@vkontakte-color-placeholder-icon-foreground-secondary--active: #717171;
+@vkontakte-color-placeholder-icon-tint: #FFFFFF;
+@vkontakte-color-placeholder-icon-tint--hover: #EBEDF0;
+@vkontakte-color-placeholder-icon-tint--active: #D7D8DB;
+@vkontakte-color-poll-option-background: #FFFFFF;
+@vkontakte-color-poll-option-background--hover: #EBEDF0;
+@vkontakte-color-poll-option-background--active: #D7D8DB;
+@vkontakte-color-tabbar-active-icon: #FFFFFF;
+@vkontakte-color-tabbar-active-icon--hover: #EBEDF0;
+@vkontakte-color-tabbar-active-icon--active: #D7D8DB;
+@vkontakte-color-tabbar-background: #333333;
+@vkontakte-color-tabbar-background--hover: #3B3B3B;
+@vkontakte-color-tabbar-background--active: #434343;
+@vkontakte-color-tabbar-inactive-icon: #828282;
+@vkontakte-color-tabbar-inactive-icon--hover: #878787;
+@vkontakte-color-tabbar-inactive-icon--active: #8C8C8C;
+@vkontakte-color-tabbar-tablet-text-secondary: #828282;
+@vkontakte-color-tabbar-tablet-text-secondary--hover: #878787;
+@vkontakte-color-tabbar-tablet-text-secondary--active: #8C8C8C;
+@vkontakte-color-toolbar-attach-background-from: #828282;
+@vkontakte-color-toolbar-attach-background-from--hover: #878787;
+@vkontakte-color-toolbar-attach-background-from--active: #8C8C8C;
+@vkontakte-color-splash-screen-icon: #333333;
+@vkontakte-color-splash-screen-icon--hover: #3B3B3B;
+@vkontakte-color-splash-screen-icon--active: #434343;
+@vkontakte-color-icon-name: #b2b2b2;
+@vkontakte-color-icon-name--hover: #B5B5B5;
+@vkontakte-color-icon-name--active: #B8B8B8;
+@vkontakte-color-panel-tab-active-text: #e1e3e6;
+@vkontakte-color-panel-tab-active-text--hover: #E2E4E7;
+@vkontakte-color-panel-tab-active-text--active: #E3E5E8;
+@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: #FFFFFF;
+@vkontakte-color-modal-card-header-close--hover: #EBEDF0;
+@vkontakte-color-modal-card-header-close--active: #D7D8DB;
+@vkontakte-im-bubble-button-outgoing-background-alpha: rgba(255, 255, 255, 0.24);
+@vkontakte-im-bubble-button-outgoing-background-alpha--hover: rgba(255, 255, 255, 0.28);
+@vkontakte-im-bubble-button-outgoing-background-alpha--active: rgba(255, 255, 255, 0.32);
+@vkontakte-im-bubble-button-foreground: #e1e3e6;
+@vkontakte-im-bubble-button-foreground--hover: #E2E4E7;
+@vkontakte-im-bubble-button-foreground--active: #E3E5E8;
+@vkontakte-im-bubble-incoming-highlighted: #656565;
+@vkontakte-im-bubble-incoming-highlighted--hover: #6B6B6B;
+@vkontakte-im-bubble-incoming-highlighted--active: #717171;
+@vkontakte-im-bubble-gift-background: #857250;
+@vkontakte-im-bubble-gift-background--hover: #8A7857;
+@vkontakte-im-bubble-gift-background--active: #8F7D5E;
+@vkontakte-im-bubble-gift-background-highlighted: #ab9871;
+@vkontakte-im-bubble-gift-background-highlighted--hover: #AE9C77;
+@vkontakte-im-bubble-gift-background-highlighted--active: #B2A07C;
+@vkontakte-im-bubble-outgoing-alternate: #555555;
+@vkontakte-im-bubble-outgoing-alternate--hover: #5C5C5C;
+@vkontakte-im-bubble-outgoing-alternate--active: #636363;
+@vkontakte-im-attach-tint: #FFFFFF;
+@vkontakte-im-attach-tint--hover: #EBEDF0;
+@vkontakte-im-attach-tint--active: #D7D8DB;
+@vkontakte-im-reply-separator: #FFFFFF;
+@vkontakte-im-reply-separator--hover: #EBEDF0;
+@vkontakte-im-reply-separator--active: #D7D8DB;
+@vkontakte-im-toolbar-voice-msg-background: #555555;
+@vkontakte-im-toolbar-voice-msg-background--hover: #5C5C5C;
+@vkontakte-im-toolbar-voice-msg-background--active: #636363;
 @vkontakte-color-im-forward-line-alpha: rgba(255, 255, 255, 0.24);
 @vkontakte-color-im-forward-line-alpha--hover: rgba(255, 255, 255, 0.28);
 @vkontakte-color-im-forward-line-alpha--active: rgba(255, 255, 255, 0.32);

package/themes/vkontakteComDark/index.pcss CHANGED Viewed

@@ -221,9 +221,9 @@
 	--color-text-primary-invariably: #333333;
 	--color-text-primary-invariably--hover: #3B3B3B;
 	--color-text-primary-invariably--active: #434343;
-	--color-text-secondary: #B2B2B2;
-	--color-text-secondary--hover: #B5B5B5;
-	--color-text-secondary--active: #B8B8B8;
+	--color-text-secondary: #828282;
+	--color-text-secondary--hover: #878787;
+	--color-text-secondary--active: #8C8C8C;
 	--color-text-subhead: #939393;
 	--color-text-subhead--hover: #979797;
 	--color-text-subhead--active: #9C9C9C;
@@ -260,6 +260,9 @@
 	--color-link-contrast: #CCCCCC;
 	--color-link-contrast--hover: #CECECE;
 	--color-link-contrast--active: #D0D0D0;
+	--color-text-button: #E1E3E6;
+	--color-text-button--hover: #E2E4E7;
+	--color-text-button--active: #E3E5E8;
 	--color-icon-accent: #71AAEB;
 	--color-icon-accent--hover: #77ADEC;
 	--color-icon-accent--active: #7CB1ED;
@@ -305,6 +308,9 @@
 	--color-icon-negative: #FF5C5C;
 	--color-icon-negative--hover: #FF6363;
 	--color-icon-negative--active: #FF6969;
+	--color-icon-button: #E1E3E6;
+	--color-icon-button--hover: #E2E4E7;
+	--color-icon-button--active: #E3E5E8;
 	--color-stroke-accent: #71AAEB;
 	--color-stroke-accent--hover: #77ADEC;
 	--color-stroke-accent--active: #7CB1ED;
@@ -341,6 +347,9 @@
 	--color-field-border-alpha: rgba(255, 255, 255, 0.12);
 	--color-field-border-alpha--hover: rgba(255, 255, 255, 0.16);
 	--color-field-border-alpha--active: rgba(255, 255, 255, 0.2);
+	--color-stroke-button: #E1E3E6;
+	--color-stroke-button--hover: #E2E4E7;
+	--color-stroke-button--active: #E3E5E8;
 	--color-accent-blue: #397DCC;
 	--color-accent-blue--hover: #4182CE;
 	--color-accent-blue--active: #4987D0;
@@ -428,6 +437,9 @@
 	--vkontakte-color-snippet-border-alpha: rgba(255, 255, 255, 0.16);
 	--vkontakte-color-snippet-border-alpha--hover: rgba(255, 255, 255, 0.2);
 	--vkontakte-color-snippet-border-alpha--active: rgba(255, 255, 255, 0.24);
+	--vkontakte-color-snippet-background: #272727;
+	--vkontakte-color-snippet-background--hover: #303030;
+	--vkontakte-color-snippet-background--active: #383838;
 	--vkontakte-color-modal-card-border-alpha: rgba(255, 255, 255, 0.12);
 	--vkontakte-color-modal-card-border-alpha--hover: rgba(255, 255, 255, 0.16);
 	--vkontakte-color-modal-card-border-alpha--active: rgba(255, 255, 255, 0.2);
@@ -440,6 +452,144 @@
 	--vkontakte-color-input-border: #555555;
 	--vkontakte-color-input-border--hover: #5C5C5C;
 	--vkontakte-color-input-border--active: #636363;
+	--vkontakte-color-search-bar-background: #222222;
+	--vkontakte-color-search-bar-background--hover: #2B2B2B;
+	--vkontakte-color-search-bar-background--active: #343434;
+	--vkontakte-color-search-bar-field-tint: #b2b2b2;
+	--vkontakte-color-search-bar-field-tint--hover: #B5B5B5;
+	--vkontakte-color-search-bar-field-tint--active: #B8B8B8;
+	--vkontakte-background-hover-alpha: rgba(255, 255, 255, 0.08);
+	--vkontakte-background-hover-alpha--hover: rgba(255, 255, 255, 0.12);
+	--vkontakte-background-hover-alpha--active: rgba(255, 255, 255, 0.16);
+	--vkontakte-color-accent-alternate: #FFFFFF;
+	--vkontakte-color-accent-alternate--hover: #EBEDF0;
+	--vkontakte-color-accent-alternate--active: #D7D8DB;
+	--vkontakte-color-background-suggestions: #333333;
+	--vkontakte-color-background-suggestions--hover: #3B3B3B;
+	--vkontakte-color-background-suggestions--active: #434343;
+	--vkontakte-color-background-keyboard: #333333;
+	--vkontakte-color-background-keyboard--hover: #3B3B3B;
+	--vkontakte-color-background-keyboard--active: #434343;
+	--vkontakte-color-content-placeholder-icon: #b2b2b2;
+	--vkontakte-color-content-placeholder-icon--hover: #B5B5B5;
+	--vkontakte-color-content-placeholder-icon--active: #B8B8B8;
+	--vkontakte-color-content-tint-foreground: #939393;
+	--vkontakte-color-content-tint-foreground--hover: #979797;
+	--vkontakte-color-content-tint-foreground--active: #9C9C9C;
+	--vkontakte-color-text-name: #e1e3e6;
+	--vkontakte-color-text-name--hover: #E2E4E7;
+	--vkontakte-color-text-name--active: #E3E5E8;
+	--vkontakte-color-control-background: #555555;
+	--vkontakte-color-control-background--hover: #5C5C5C;
+	--vkontakte-color-control-background--active: #636363;
+	--vkontakte-color-control-foreground: #e1e3e6;
+	--vkontakte-color-control-foreground--hover: #E2E4E7;
+	--vkontakte-color-control-foreground--active: #E3E5E8;
+	--vkontakte-color-control-tint-muted: #939393;
+	--vkontakte-color-control-tint-muted--hover: #979797;
+	--vkontakte-color-control-tint-muted--active: #9C9C9C;
+	--vkontakte-color-header-search-field-background: #424242;
+	--vkontakte-color-header-search-field-background--hover: #4A4A4A;
+	--vkontakte-color-header-search-field-background--active: #515151;
+	--vkontakte-color-header-search-field-tint: #b2b2b2;
+	--vkontakte-color-header-search-field-tint--hover: #B5B5B5;
+	--vkontakte-color-header-search-field-tint--active: #B8B8B8;
+	--vkontakte-color-header-tab-active-indicator: #397dcc;
+	--vkontakte-color-header-tab-active-indicator--hover: #4182CE;
+	--vkontakte-color-header-tab-active-indicator--active: #4987D0;
+	--vkontakte-color-icon-outline-medium: #b2b2b2;
+	--vkontakte-color-icon-outline-medium--hover: #B5B5B5;
+	--vkontakte-color-icon-outline-medium--active: #B8B8B8;
+	--vkontakte-color-icon-outline-secondary: #939393;
+	--vkontakte-color-icon-outline-secondary--hover: #979797;
+	--vkontakte-color-icon-outline-secondary--active: #9C9C9C;
+	--vkontakte-color-skeleton-shimmer-from: #222222;
+	--vkontakte-color-skeleton-shimmer-from--hover: #2B2B2B;
+	--vkontakte-color-skeleton-shimmer-from--active: #343434;
+	--vkontakte-color-alpha-skeleton-shimmer-to: transparent;
+	--vkontakte-color-alpha-skeleton-shimmer-to--hover: rgba(255, 255, 255, 0.04);
+	--vkontakte-color-alpha-skeleton-shimmer-to--active: rgba(255, 255, 255, 0.08);
+	--vkontakte-color-loader-background: #555555;
+	--vkontakte-color-loader-background--hover: #5C5C5C;
+	--vkontakte-color-loader-background--active: #636363;
+	--vkontakte-color-loader-tint: #828282;
+	--vkontakte-color-loader-tint--hover: #878787;
+	--vkontakte-color-loader-tint--active: #8C8C8C;
+	--vkontakte-color-music-playback-icon: #FFFFFF;
+	--vkontakte-color-music-playback-icon--hover: #EBEDF0;
+	--vkontakte-color-music-playback-icon--active: #D7D8DB;
+	--vkontakte-color-status-background: #222222;
+	--vkontakte-color-status-background--hover: #2B2B2B;
+	--vkontakte-color-status-background--active: #343434;
+	--vkontakte-color-placeholder-icon-foreground-primary: #939393;
+	--vkontakte-color-placeholder-icon-foreground-primary--hover: #979797;
+	--vkontakte-color-placeholder-icon-foreground-primary--active: #9C9C9C;
+	--vkontakte-color-placeholder-icon-foreground-secondary: #656565;
+	--vkontakte-color-placeholder-icon-foreground-secondary--hover: #6B6B6B;
+	--vkontakte-color-placeholder-icon-foreground-secondary--active: #717171;
+	--vkontakte-color-placeholder-icon-tint: #FFFFFF;
+	--vkontakte-color-placeholder-icon-tint--hover: #EBEDF0;
+	--vkontakte-color-placeholder-icon-tint--active: #D7D8DB;
+	--vkontakte-color-poll-option-background: #FFFFFF;
+	--vkontakte-color-poll-option-background--hover: #EBEDF0;
+	--vkontakte-color-poll-option-background--active: #D7D8DB;
+	--vkontakte-color-tabbar-active-icon: #FFFFFF;
+	--vkontakte-color-tabbar-active-icon--hover: #EBEDF0;
+	--vkontakte-color-tabbar-active-icon--active: #D7D8DB;
+	--vkontakte-color-tabbar-background: #333333;
+	--vkontakte-color-tabbar-background--hover: #3B3B3B;
+	--vkontakte-color-tabbar-background--active: #434343;
+	--vkontakte-color-tabbar-inactive-icon: #828282;
+	--vkontakte-color-tabbar-inactive-icon--hover: #878787;
+	--vkontakte-color-tabbar-inactive-icon--active: #8C8C8C;
+	--vkontakte-color-tabbar-tablet-text-secondary: #828282;
+	--vkontakte-color-tabbar-tablet-text-secondary--hover: #878787;
+	--vkontakte-color-tabbar-tablet-text-secondary--active: #8C8C8C;
+	--vkontakte-color-toolbar-attach-background-from: #828282;
+	--vkontakte-color-toolbar-attach-background-from--hover: #878787;
+	--vkontakte-color-toolbar-attach-background-from--active: #8C8C8C;
+	--vkontakte-color-splash-screen-icon: #333333;
+	--vkontakte-color-splash-screen-icon--hover: #3B3B3B;
+	--vkontakte-color-splash-screen-icon--active: #434343;
+	--vkontakte-color-icon-name: #b2b2b2;
+	--vkontakte-color-icon-name--hover: #B5B5B5;
+	--vkontakte-color-icon-name--active: #B8B8B8;
+	--vkontakte-color-panel-tab-active-text: #e1e3e6;
+	--vkontakte-color-panel-tab-active-text--hover: #E2E4E7;
+	--vkontakte-color-panel-tab-active-text--active: #E3E5E8;
+	--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: #FFFFFF;
+	--vkontakte-color-modal-card-header-close--hover: #EBEDF0;
+	--vkontakte-color-modal-card-header-close--active: #D7D8DB;
+	--vkontakte-im-bubble-button-outgoing-background-alpha: rgba(255, 255, 255, 0.24);
+	--vkontakte-im-bubble-button-outgoing-background-alpha--hover: rgba(255, 255, 255, 0.28);
+	--vkontakte-im-bubble-button-outgoing-background-alpha--active: rgba(255, 255, 255, 0.32);
+	--vkontakte-im-bubble-button-foreground: #e1e3e6;
+	--vkontakte-im-bubble-button-foreground--hover: #E2E4E7;
+	--vkontakte-im-bubble-button-foreground--active: #E3E5E8;
+	--vkontakte-im-bubble-incoming-highlighted: #656565;
+	--vkontakte-im-bubble-incoming-highlighted--hover: #6B6B6B;
+	--vkontakte-im-bubble-incoming-highlighted--active: #717171;
+	--vkontakte-im-bubble-gift-background: #857250;
+	--vkontakte-im-bubble-gift-background--hover: #8A7857;
+	--vkontakte-im-bubble-gift-background--active: #8F7D5E;
+	--vkontakte-im-bubble-gift-background-highlighted: #ab9871;
+	--vkontakte-im-bubble-gift-background-highlighted--hover: #AE9C77;
+	--vkontakte-im-bubble-gift-background-highlighted--active: #B2A07C;
+	--vkontakte-im-bubble-outgoing-alternate: #555555;
+	--vkontakte-im-bubble-outgoing-alternate--hover: #5C5C5C;
+	--vkontakte-im-bubble-outgoing-alternate--active: #636363;
+	--vkontakte-im-attach-tint: #FFFFFF;
+	--vkontakte-im-attach-tint--hover: #EBEDF0;
+	--vkontakte-im-attach-tint--active: #D7D8DB;
+	--vkontakte-im-reply-separator: #FFFFFF;
+	--vkontakte-im-reply-separator--hover: #EBEDF0;
+	--vkontakte-im-reply-separator--active: #D7D8DB;
+	--vkontakte-im-toolbar-voice-msg-background: #555555;
+	--vkontakte-im-toolbar-voice-msg-background--hover: #5C5C5C;
+	--vkontakte-im-toolbar-voice-msg-background--active: #636363;
 	--vkontakte-color-im-forward-line-alpha: rgba(255, 255, 255, 0.24);
 	--vkontakte-color-im-forward-line-alpha--hover: rgba(255, 255, 255, 0.28);
 	--vkontakte-color-im-forward-line-alpha--active: rgba(255, 255, 255, 0.32);

package/themes/vkontakteComDark/index.scss CHANGED Viewed

@@ -220,9 +220,9 @@ $color-text-primary--active: #E3E5E8;
 $color-text-primary-invariably: #333333;
 $color-text-primary-invariably--hover: #3B3B3B;
 $color-text-primary-invariably--active: #434343;
-$color-text-secondary: #B2B2B2;
-$color-text-secondary--hover: #B5B5B5;
-$color-text-secondary--active: #B8B8B8;
+$color-text-secondary: #828282;
+$color-text-secondary--hover: #878787;
+$color-text-secondary--active: #8C8C8C;
 $color-text-subhead: #939393;
 $color-text-subhead--hover: #979797;
 $color-text-subhead--active: #9C9C9C;
@@ -259,6 +259,9 @@ $color-text-muted--active: #D0D0D0;
 $color-link-contrast: #CCCCCC;
 $color-link-contrast--hover: #CECECE;
 $color-link-contrast--active: #D0D0D0;
+$color-text-button: #E1E3E6;
+$color-text-button--hover: #E2E4E7;
+$color-text-button--active: #E3E5E8;
 $color-icon-accent: #71AAEB;
 $color-icon-accent--hover: #77ADEC;
 $color-icon-accent--active: #7CB1ED;
@@ -304,6 +307,9 @@ $color-icon-positive--active: #59B959;
 $color-icon-negative: #FF5C5C;
 $color-icon-negative--hover: #FF6363;
 $color-icon-negative--active: #FF6969;
+$color-icon-button: #E1E3E6;
+$color-icon-button--hover: #E2E4E7;
+$color-icon-button--active: #E3E5E8;
 $color-stroke-accent: #71AAEB;
 $color-stroke-accent--hover: #77ADEC;
 $color-stroke-accent--active: #7CB1ED;
@@ -340,6 +346,9 @@ $color-image-border-alpha--active: rgba(255, 255, 255, 0.16);
 $color-field-border-alpha: rgba(255, 255, 255, 0.12);
 $color-field-border-alpha--hover: rgba(255, 255, 255, 0.16);
 $color-field-border-alpha--active: rgba(255, 255, 255, 0.2);
+$color-stroke-button: #E1E3E6;
+$color-stroke-button--hover: #E2E4E7;
+$color-stroke-button--active: #E3E5E8;
 $color-accent-blue: #397DCC;
 $color-accent-blue--hover: #4182CE;
 $color-accent-blue--active: #4987D0;
@@ -427,6 +436,9 @@ $color-transparent--active: rgba(255, 255, 255, 0.08);
 $vkontakte-color-snippet-border-alpha: rgba(255, 255, 255, 0.16);
 $vkontakte-color-snippet-border-alpha--hover: rgba(255, 255, 255, 0.2);
 $vkontakte-color-snippet-border-alpha--active: rgba(255, 255, 255, 0.24);
+$vkontakte-color-snippet-background: #272727;
+$vkontakte-color-snippet-background--hover: #303030;
+$vkontakte-color-snippet-background--active: #383838;
 $vkontakte-color-modal-card-border-alpha: rgba(255, 255, 255, 0.12);
 $vkontakte-color-modal-card-border-alpha--hover: rgba(255, 255, 255, 0.16);
 $vkontakte-color-modal-card-border-alpha--active: rgba(255, 255, 255, 0.2);
@@ -439,6 +451,144 @@ $vkontakte-color-action-sheet-separator-alpha--active: rgba(255, 255, 255, 0.24)
 $vkontakte-color-input-border: #555555;
 $vkontakte-color-input-border--hover: #5C5C5C;
 $vkontakte-color-input-border--active: #636363;
+$vkontakte-color-search-bar-background: #222222;
+$vkontakte-color-search-bar-background--hover: #2B2B2B;
+$vkontakte-color-search-bar-background--active: #343434;
+$vkontakte-color-search-bar-field-tint: #b2b2b2;
+$vkontakte-color-search-bar-field-tint--hover: #B5B5B5;
+$vkontakte-color-search-bar-field-tint--active: #B8B8B8;
+$vkontakte-background-hover-alpha: rgba(255, 255, 255, 0.08);
+$vkontakte-background-hover-alpha--hover: rgba(255, 255, 255, 0.12);
+$vkontakte-background-hover-alpha--active: rgba(255, 255, 255, 0.16);
+$vkontakte-color-accent-alternate: #FFFFFF;
+$vkontakte-color-accent-alternate--hover: #EBEDF0;
+$vkontakte-color-accent-alternate--active: #D7D8DB;
+$vkontakte-color-background-suggestions: #333333;
+$vkontakte-color-background-suggestions--hover: #3B3B3B;
+$vkontakte-color-background-suggestions--active: #434343;
+$vkontakte-color-background-keyboard: #333333;
+$vkontakte-color-background-keyboard--hover: #3B3B3B;
+$vkontakte-color-background-keyboard--active: #434343;
+$vkontakte-color-content-placeholder-icon: #b2b2b2;
+$vkontakte-color-content-placeholder-icon--hover: #B5B5B5;
+$vkontakte-color-content-placeholder-icon--active: #B8B8B8;
+$vkontakte-color-content-tint-foreground: #939393;
+$vkontakte-color-content-tint-foreground--hover: #979797;
+$vkontakte-color-content-tint-foreground--active: #9C9C9C;
+$vkontakte-color-text-name: #e1e3e6;
+$vkontakte-color-text-name--hover: #E2E4E7;
+$vkontakte-color-text-name--active: #E3E5E8;
+$vkontakte-color-control-background: #555555;
+$vkontakte-color-control-background--hover: #5C5C5C;
+$vkontakte-color-control-background--active: #636363;
+$vkontakte-color-control-foreground: #e1e3e6;
+$vkontakte-color-control-foreground--hover: #E2E4E7;
+$vkontakte-color-control-foreground--active: #E3E5E8;
+$vkontakte-color-control-tint-muted: #939393;
+$vkontakte-color-control-tint-muted--hover: #979797;
+$vkontakte-color-control-tint-muted--active: #9C9C9C;
+$vkontakte-color-header-search-field-background: #424242;
+$vkontakte-color-header-search-field-background--hover: #4A4A4A;
+$vkontakte-color-header-search-field-background--active: #515151;
+$vkontakte-color-header-search-field-tint: #b2b2b2;
+$vkontakte-color-header-search-field-tint--hover: #B5B5B5;
+$vkontakte-color-header-search-field-tint--active: #B8B8B8;
+$vkontakte-color-header-tab-active-indicator: #397dcc;
+$vkontakte-color-header-tab-active-indicator--hover: #4182CE;
+$vkontakte-color-header-tab-active-indicator--active: #4987D0;
+$vkontakte-color-icon-outline-medium: #b2b2b2;
+$vkontakte-color-icon-outline-medium--hover: #B5B5B5;
+$vkontakte-color-icon-outline-medium--active: #B8B8B8;
+$vkontakte-color-icon-outline-secondary: #939393;
+$vkontakte-color-icon-outline-secondary--hover: #979797;
+$vkontakte-color-icon-outline-secondary--active: #9C9C9C;
+$vkontakte-color-skeleton-shimmer-from: #222222;
+$vkontakte-color-skeleton-shimmer-from--hover: #2B2B2B;
+$vkontakte-color-skeleton-shimmer-from--active: #343434;
+$vkontakte-color-alpha-skeleton-shimmer-to: transparent;
+$vkontakte-color-alpha-skeleton-shimmer-to--hover: rgba(255, 255, 255, 0.04);
+$vkontakte-color-alpha-skeleton-shimmer-to--active: rgba(255, 255, 255, 0.08);
+$vkontakte-color-loader-background: #555555;
+$vkontakte-color-loader-background--hover: #5C5C5C;
+$vkontakte-color-loader-background--active: #636363;
+$vkontakte-color-loader-tint: #828282;
+$vkontakte-color-loader-tint--hover: #878787;
+$vkontakte-color-loader-tint--active: #8C8C8C;
+$vkontakte-color-music-playback-icon: #FFFFFF;
+$vkontakte-color-music-playback-icon--hover: #EBEDF0;
+$vkontakte-color-music-playback-icon--active: #D7D8DB;
+$vkontakte-color-status-background: #222222;
+$vkontakte-color-status-background--hover: #2B2B2B;
+$vkontakte-color-status-background--active: #343434;
+$vkontakte-color-placeholder-icon-foreground-primary: #939393;
+$vkontakte-color-placeholder-icon-foreground-primary--hover: #979797;
+$vkontakte-color-placeholder-icon-foreground-primary--active: #9C9C9C;
+$vkontakte-color-placeholder-icon-foreground-secondary: #656565;
+$vkontakte-color-placeholder-icon-foreground-secondary--hover: #6B6B6B;
+$vkontakte-color-placeholder-icon-foreground-secondary--active: #717171;
+$vkontakte-color-placeholder-icon-tint: #FFFFFF;
+$vkontakte-color-placeholder-icon-tint--hover: #EBEDF0;
+$vkontakte-color-placeholder-icon-tint--active: #D7D8DB;
+$vkontakte-color-poll-option-background: #FFFFFF;
+$vkontakte-color-poll-option-background--hover: #EBEDF0;
+$vkontakte-color-poll-option-background--active: #D7D8DB;
+$vkontakte-color-tabbar-active-icon: #FFFFFF;
+$vkontakte-color-tabbar-active-icon--hover: #EBEDF0;
+$vkontakte-color-tabbar-active-icon--active: #D7D8DB;
+$vkontakte-color-tabbar-background: #333333;
+$vkontakte-color-tabbar-background--hover: #3B3B3B;
+$vkontakte-color-tabbar-background--active: #434343;
+$vkontakte-color-tabbar-inactive-icon: #828282;
+$vkontakte-color-tabbar-inactive-icon--hover: #878787;
+$vkontakte-color-tabbar-inactive-icon--active: #8C8C8C;
+$vkontakte-color-tabbar-tablet-text-secondary: #828282;
+$vkontakte-color-tabbar-tablet-text-secondary--hover: #878787;
+$vkontakte-color-tabbar-tablet-text-secondary--active: #8C8C8C;
+$vkontakte-color-toolbar-attach-background-from: #828282;
+$vkontakte-color-toolbar-attach-background-from--hover: #878787;
+$vkontakte-color-toolbar-attach-background-from--active: #8C8C8C;
+$vkontakte-color-splash-screen-icon: #333333;
+$vkontakte-color-splash-screen-icon--hover: #3B3B3B;
+$vkontakte-color-splash-screen-icon--active: #434343;
+$vkontakte-color-icon-name: #b2b2b2;
+$vkontakte-color-icon-name--hover: #B5B5B5;
+$vkontakte-color-icon-name--active: #B8B8B8;
+$vkontakte-color-panel-tab-active-text: #e1e3e6;
+$vkontakte-color-panel-tab-active-text--hover: #E2E4E7;
+$vkontakte-color-panel-tab-active-text--active: #E3E5E8;
+$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: #FFFFFF;
+$vkontakte-color-modal-card-header-close--hover: #EBEDF0;
+$vkontakte-color-modal-card-header-close--active: #D7D8DB;
+$vkontakte-im-bubble-button-outgoing-background-alpha: rgba(255, 255, 255, 0.24);
+$vkontakte-im-bubble-button-outgoing-background-alpha--hover: rgba(255, 255, 255, 0.28);
+$vkontakte-im-bubble-button-outgoing-background-alpha--active: rgba(255, 255, 255, 0.32);
+$vkontakte-im-bubble-button-foreground: #e1e3e6;
+$vkontakte-im-bubble-button-foreground--hover: #E2E4E7;
+$vkontakte-im-bubble-button-foreground--active: #E3E5E8;
+$vkontakte-im-bubble-incoming-highlighted: #656565;
+$vkontakte-im-bubble-incoming-highlighted--hover: #6B6B6B;
+$vkontakte-im-bubble-incoming-highlighted--active: #717171;
+$vkontakte-im-bubble-gift-background: #857250;
+$vkontakte-im-bubble-gift-background--hover: #8A7857;
+$vkontakte-im-bubble-gift-background--active: #8F7D5E;
+$vkontakte-im-bubble-gift-background-highlighted: #ab9871;
+$vkontakte-im-bubble-gift-background-highlighted--hover: #AE9C77;
+$vkontakte-im-bubble-gift-background-highlighted--active: #B2A07C;
+$vkontakte-im-bubble-outgoing-alternate: #555555;
+$vkontakte-im-bubble-outgoing-alternate--hover: #5C5C5C;
+$vkontakte-im-bubble-outgoing-alternate--active: #636363;
+$vkontakte-im-attach-tint: #FFFFFF;
+$vkontakte-im-attach-tint--hover: #EBEDF0;
+$vkontakte-im-attach-tint--active: #D7D8DB;
+$vkontakte-im-reply-separator: #FFFFFF;
+$vkontakte-im-reply-separator--hover: #EBEDF0;
+$vkontakte-im-reply-separator--active: #D7D8DB;
+$vkontakte-im-toolbar-voice-msg-background: #555555;
+$vkontakte-im-toolbar-voice-msg-background--hover: #5C5C5C;
+$vkontakte-im-toolbar-voice-msg-background--active: #636363;
 $vkontakte-color-im-forward-line-alpha: rgba(255, 255, 255, 0.24);
 $vkontakte-color-im-forward-line-alpha--hover: rgba(255, 255, 255, 0.28);
 $vkontakte-color-im-forward-line-alpha--active: rgba(255, 255, 255, 0.32);