@vkontakte/vkui 4.37.1 → 4.37.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.37.1",
+  "version": "4.37.3",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -43,7 +43,7 @@
     "@types/webpack-dev-server": "^3.11.2",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.0.0",
-    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.40.4",
+    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v9.51.1",
     "@vkontakte/eslint-config": "3.1.0",
     "@vkontakte/icons": "^1.184.0",
     "@vkontakte/vk-bridge": "^2.1.3",

package/src/components/ModalPage/ModalPage.css

@@ -1,6 +1,4 @@
 .ModalPage {
-  display: flex;
-  justify-content: center;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -11,6 +9,8 @@
 }
 
 .ModalPage--desktop {
+  display: flex;
+  justify-content: center;
   align-items: center;
 }
 
@@ -18,7 +18,11 @@
   width: 100%;
   height: 100%;
   position: absolute;
+  right: 0;
   bottom: 0;
+  left: 0;
+  margin-right: auto;
+  margin-left: auto;
   display: flex;
   align-items: flex-end;
   pointer-events: initial;

package/src/components/ModalRoot/ModalRoot.tsx

@@ -825,7 +825,7 @@ function initPageModal(modalState: ModalsStateEntry) {
 
   // Если модалка может открываться на весь экран, и новый сдвиг больше предыдущего, то откроем её на весь экран
   if (
-    (modalState.expandable && translateY > (prevTranslateY ?? 0)) ||
+    (modalState.expandable && translateY > (prevTranslateY ?? 100)) ||
     modalState.settlingHeight === 100
   ) {
     translateY = 0;

package/src/components/PanelHeader/PanelHeader.css

@@ -213,7 +213,9 @@
 }
 
 /* TODO: v5.0.0 новая адаптивность */
-.PanelHeader--vkcom.PanelHeader--sizeX-regular:not(.ModalPageHeader__in)::after {
+.PanelHeader--vkcom.PanelHeader--sizeX-regular:not(.ModalPageHeader__in)::after,
+.PanelHeader--vkcom.PanelHeader--sizeX-regular:not(.PanelHeader--sep)
+  .PanelHeader__in::after {
   position: absolute;
   left: var(--thin-border);
   right: var(--thin-border);

package/src/components/TabsItem/TabsItem.css

@@ -157,6 +157,14 @@
   color: var(--header_tint_alternate, var(--vkui--color_icon_accent_themed));
 }
 
+/* TODO удалить блок в v5.0.0 */
+.TabsItem--selected.TabsItem--accent .TabsItem__after {
+  color: var(
+    --button_secondary_foreground,
+    var(--vkui--color_icon_accent_themed)
+  );
+}
+
 /* Элемент */
 .TabsItem__underline {
   position: absolute;

package/src/styles/vkcom_dark.css

@@ -33,8 +33,8 @@ body[scheme="vkcom_dark"],
   --button_outline_foreground: #e1e3e6;
   --button_primary_background: #e1e3e6;
   --button_primary_foreground: #222222;
-  --button_secondary_background: #555555;
-  --button_secondary_background_highlighted: #656565;
+  --button_secondary_background: #484848;
+  --button_secondary_background_highlighted: #555555;
   --button_secondary_destructive_background: #555555;
   --button_secondary_destructive_background_highlighted: rgba(85, 85, 85, 0.6);
   --button_secondary_destructive_foreground: #ff5c5c;
@@ -68,7 +68,7 @@ body[scheme="vkcom_dark"],
   --counter_secondary_background: #828282;
   --counter_secondary_text: #222222;
   --destructive: #ff5c5c;
-  --dynamic_blue: #5181b8;
+  --dynamic_blue: #397dcc;
   --dynamic_gray: #aeb7c2;
   --dynamic_green: #4bb34b;
   --dynamic_neon_pink: #f45fff;
@@ -79,7 +79,7 @@ body[scheme="vkcom_dark"],
   --dynamic_violet: #a393f5;
   --feed_recommended_friend_promo_background: #6f7985;
   --field_background: #292929;
-  --field_border: #424242;
+  --field_border: #484848;
   --field_error_background: rgba(230, 70, 70, 0.16);
   --field_error_border: #e64646;
   --field_text_placeholder: #828282;
@@ -95,10 +95,10 @@ body[scheme="vkcom_dark"],
   --header_background: #222222;
   --header_background_before_blur: #0a0a0a;
   --header_background_before_blur_alternate: #0a0a0a;
-  --header_search_field_background: #424242;
+  --header_search_field_background: #484848;
   --header_search_field_tint: #b2b2b2;
   --header_tab_active_background: #656565;
-  --header_tab_active_indicator: #5181b8;
+  --header_tab_active_indicator: #397dcc;
   --header_tab_active_text: #e1e3e6;
   --header_tab_inactive_text: #828282;
   --header_text: #e1e3e6;
@@ -153,7 +153,7 @@ body[scheme="vkcom_dark"],
   --im_toolbar_separator: #b2b2b2;
   --im_toolbar_voice_msg_background: #555555;
   --image_border: rgba(255, 255, 255, 0.08);
-  --input_background: #424242;
+  --input_background: #484848;
   --input_border: #555555;
   --landing_background: #222222;
   --landing_field_background: #292929;
@@ -179,7 +179,7 @@ body[scheme="vkcom_dark"],
   --loader_track_value_fill: #ffffff;
   --media_overlay_button_background: #ffffff;
   --media_overlay_button_foreground: #333333;
-  --modal_card_background: #292929;
+  --modal_card_background: #333333;
   --modal_card_border: rgba(255, 255, 255, 0.12);
   --modal_card_header_close: #ffffff;
   --music_playback_icon: #ffffff;
@@ -197,7 +197,7 @@ body[scheme="vkcom_dark"],
   --poll_option_background: #ffffff;
   --primary_overlay_badge: rgba(255, 255, 255, 0.4);
   --search_bar_background: #222222;
-  --search_bar_field_background: #424242;
+  --search_bar_field_background: #484848;
   --search_bar_field_tint: #b2b2b2;
   --search_bar_segmented_control_tint: #939393;
   --secondary_overlay_badge: rgba(255, 255, 255, 0.16);
@@ -205,8 +205,8 @@ body[scheme="vkcom_dark"],
   --segmented_control_tint: #828282;
   --selection_off_icon: #656565;
   --separator_alpha: rgba(255, 255, 255, 0.16);
-  --separator_alternate: #333333;
-  --separator_common: #424242;
+  --separator_alternate: #292929;
+  --separator_common: #484848;
   --skeleton_foreground_from: #292929;
   --skeleton_foreground_to: #333333;
   --skeleton_shimmer_from: #222222;
@@ -216,8 +216,8 @@ body[scheme="vkcom_dark"],
   --snippet_icon_tertiary: #656565;
   --splashscreen_icon: #333333;
   --statusbar_alternate_legacy_background: rgba(0, 0, 0, 0);
-  --stories_create_button_background_from: #424242;
-  --stories_create_button_background_to: #424242;
+  --stories_create_button_background_from: #484848;
+  --stories_create_button_background_to: #484848;
   --stories_create_button_foreground: #cccccc;
   --stories_create_button_icon_background: #555555;
   --stories_skeleton_loader_background: #555555;
@@ -225,14 +225,14 @@ body[scheme="vkcom_dark"],
   --tabbar_active_icon: #ffffff;
   --tabbar_background: #333333;
   --tabbar_inactive_icon: #828282;
-  --tabbar_tablet_active_icon: #5181b8;
+  --tabbar_tablet_active_icon: #397dcc;
   --tabbar_tablet_background: #292929;
   --tabbar_tablet_inactive_icon: #828282;
   --tabbar_tablet_text_primary: #e1e3e6;
   --tabbar_tablet_text_secondary: #828282;
   --text_action_counter: #b2b2b2;
   --text_link: #71aaeb;
-  --text_link_highlighted_background: #5181b8;
+  --text_link_highlighted_background: #397dcc;
   --text_muted: #cccccc;
   --text_name: #e1e3e6;
   --text_placeholder: #b2b2b2;

package/src/styles/vkcom_light.css

@@ -5,14 +5,14 @@
 body[scheme="vkcom_light"],
 [scheme="vkcom_light"],
 .vkuivkcom_light {
-  --accent: #5181b8;
+  --accent: #447bba;
   --accent_alternate: #0077ff;
-  --action_sheet_action_foreground: #5181b8;
+  --action_sheet_action_foreground: #447bba;
   --action_sheet_separator: rgba(0, 0, 0, 0.12);
   --activity_indicator_tint: #aeb7c2;
-  --attach_picker_tab_active_background: #5181b8;
+  --attach_picker_tab_active_background: #447bba;
   --attach_picker_tab_active_icon: #ffffff;
-  --attach_picker_tab_active_text: #5181b8;
+  --attach_picker_tab_active_text: #447bba;
   --attach_picker_tab_inactive_background: #f5f5f5;
   --attach_picker_tab_inactive_icon: #818c99;
   --attach_picker_tab_inactive_text: #818c99;
@@ -28,10 +28,10 @@ body[scheme="vkcom_light"],
   --button_commerce_background: #4bb34b;
   --button_commerce_foreground: #ffffff;
   --button_muted_background: #e5ebf1;
-  --button_muted_foreground: #55677d;
-  --button_outline_border: #2a5885;
-  --button_outline_foreground: #2a5885;
-  --button_primary_background: #5181b8;
+  --button_muted_foreground: #346297;
+  --button_outline_border: #346297;
+  --button_outline_foreground: #346297;
+  --button_primary_background: #447bba;
   --button_primary_foreground: #ffffff;
   --button_secondary_background: #e5ebf1;
   --button_secondary_background_highlighted: #dae2ea;
@@ -49,11 +49,11 @@ body[scheme="vkcom_light"],
     70,
     0.12
   );
-  --button_secondary_foreground: #55677d;
-  --button_secondary_foreground_highlighted: #55677d;
+  --button_secondary_foreground: #346297;
+  --button_secondary_foreground_highlighted: #224b7a;
   --button_tertiary_background: rgba(0, 0, 0, 0);
-  --button_tertiary_foreground: #2a5885;
-  --cell_button_foreground: #2a5885;
+  --button_tertiary_foreground: #346297;
+  --cell_button_foreground: #346297;
   --content_negative_background: #faebeb;
   --content_placeholder_icon: #99a2ad;
   --content_placeholder_text: #818c99;
@@ -63,10 +63,10 @@ body[scheme="vkcom_light"],
   --content_warning_background: #faefd2;
   --control_background: #edeef0;
   --control_background_secondary: #ffffff;
-  --control_foreground: #5181b8;
+  --control_foreground: #447bba;
   --control_tint: #ffffff;
   --control_tint_muted: #828282;
-  --counter_primary_background: #5181b8;
+  --counter_primary_background: #447bba;
   --counter_primary_text: #ffffff;
   --counter_prominent_background: #ff3347;
   --counter_prominent_text: #ffffff;
@@ -82,7 +82,7 @@ body[scheme="vkcom_light"],
   --dynamic_raspberry_pink: #e03fab;
   --dynamic_red: #ff3347;
   --dynamic_violet: #792ec0;
-  --feed_recommended_friend_promo_background: #5181b8;
+  --feed_recommended_friend_promo_background: #447bba;
   --field_background: #f7f8fa;
   --field_border: #dce1e6;
   --field_error_background: #faebeb;
@@ -94,7 +94,7 @@ body[scheme="vkcom_light"],
   --float_button_border: rgba(0, 0, 0, 0.08);
   --float_button_foreground: #99a2ad;
   --header_alternate_background: #ffffff;
-  --header_alternate_tab_active_indicator: #5181b8;
+  --header_alternate_tab_active_indicator: #447bba;
   --header_alternate_tab_active_text: #000000;
   --header_alternate_tab_inactive_text: #99a2ad;
   --header_background: #ffffff;
@@ -103,14 +103,14 @@ body[scheme="vkcom_light"],
   --header_search_field_background: #edeef0;
   --header_search_field_tint: #818c99;
   --header_tab_active_background: rgba(0, 0, 0, 0);
-  --header_tab_active_indicator: #5181b8;
+  --header_tab_active_indicator: #397dcc;
   --header_tab_active_text: #000000;
   --header_tab_inactive_text: #99a2ad;
   --header_text: #000000;
   --header_text_alternate: #000000;
   --header_text_secondary: #818c99;
   --header_tint: #aeb7c2;
-  --header_tint_alternate: #0077ff;
+  --header_tint_alternate: #447bba;
   --icon_alpha_placeholder: #ffffff;
   --icon_medium: #6f7985;
   --icon_medium_alpha: rgba(0, 0, 0, 0.48);
@@ -121,7 +121,7 @@ body[scheme="vkcom_light"],
   --icon_secondary_alpha: rgba(0, 0, 0, 0.36);
   --icon_tertiary: #aeb7c2;
   --icon_tertiary_alpha: rgba(0, 0, 0, 0.24);
-  --im_attach_tint: #5181b8;
+  --im_attach_tint: #447bba;
   --im_bubble_border_alternate: #dce1e6;
   --im_bubble_border_alternate_highlighted: #cccccc;
   --im_bubble_button_background: #f7f8fa;
@@ -164,24 +164,24 @@ body[scheme="vkcom_light"],
   --landing_field_background: #f7f8fa;
   --landing_field_border: rgba(0, 0, 0, 0);
   --landing_field_placeholder: #818c99;
-  --landing_login_button_background: #5181b8;
+  --landing_login_button_background: #447bba;
   --landing_login_button_foreground: #ffffff;
-  --landing_primary_button_background: #5181b8;
+  --landing_primary_button_background: #447bba;
   --landing_primary_button_foreground: #ffffff;
   --landing_secondary_button_background: rgba(0, 57, 115, 0.1);
-  --landing_secondary_button_foreground: #5181b8;
+  --landing_secondary_button_foreground: #447bba;
   --landing_snippet_border: rgba(0, 0, 0, 0.12);
   --landing_tertiary_button_background: rgba(0, 0, 0, 0);
-  --landing_tertiary_button_foreground: #5181b8;
+  --landing_tertiary_button_foreground: #447bba;
   --landing_text_primary: #000000;
   --landing_text_secondary: #818c99;
-  --landing_text_title: #5181b8;
+  --landing_text_title: #447bba;
   --like_text_tint: #ff3347;
   --link_alternate: #2a5885;
   --loader_background: #edeef0;
   --loader_tint: #c5d0db;
   --loader_track_fill: #d3d9de;
-  --loader_track_value_fill: #5181b8;
+  --loader_track_value_fill: #447bba;
   --media_overlay_button_background: #ffffff;
   --media_overlay_button_foreground: #333333;
   --modal_card_background: #ffffff;
@@ -199,7 +199,7 @@ body[scheme="vkcom_light"],
   --placeholder_icon_foreground_primary: #99a2ad;
   --placeholder_icon_foreground_secondary: #aeb7c2;
   --placeholder_icon_tint: #1d3a5c;
-  --poll_option_background: #5181b8;
+  --poll_option_background: #447bba;
   --primary_overlay_badge: rgba(0, 0, 0, 0.56);
   --search_bar_background: rgba(0, 0, 0, 0);
   --search_bar_field_background: #edeef0;
@@ -213,7 +213,7 @@ body[scheme="vkcom_light"],
   --separator_alternate: #e7e8ec;
   --separator_common: #dce1e6;
   --skeleton_foreground_from: #f0f2f5;
-  --skeleton_foreground_to: #edeef0;
+  --skeleton_foreground_to: #e7e8ec;
   --skeleton_shimmer_from: #ffffff;
   --skeleton_shimmer_to: rgba(255, 255, 255, 0);
   --snippet_background: #ffffff;
@@ -227,10 +227,10 @@ body[scheme="vkcom_light"],
   --stories_create_button_icon_background: #ffffff;
   --stories_skeleton_loader_background: #cccccc;
   --switch_ios_off_border: #dce1e6;
-  --tabbar_active_icon: #5181b8;
+  --tabbar_active_icon: #447bba;
   --tabbar_background: #f7f8fa;
   --tabbar_inactive_icon: #99a2ad;
-  --tabbar_tablet_active_icon: #5181b8;
+  --tabbar_tablet_active_icon: #447bba;
   --tabbar_tablet_background: #f7f8fa;
   --tabbar_tablet_inactive_icon: #99a2ad;
   --tabbar_tablet_text_primary: #000000;