@vkontakte/vkui 4.35.3 → 4.35.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.35.3",
+  "version": "4.35.4",
   "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.46.3",
     "@vkontakte/eslint-config": "3.1.0",
     "@vkontakte/icons": "^1.145.1",
     "@vkontakte/vk-bridge": "^2.1.3",

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,12 +1,11 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import type { HasRootRef, HasAlign } from "../../types";
+import type { HasRootRef, AlignType } from "../../types";
 import "./ButtonGroup.css";
 
 export interface ButtonGroupProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    HasRootRef<HTMLDivElement>,
-    HasAlign {
+    HasRootRef<HTMLDivElement> {
   /**
    * Задает расположение элементов внутри группы, вертикальное или горизонтальное.
    */
@@ -21,6 +20,10 @@ export interface ButtonGroupProps
    * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.
    */
   stretched?: boolean;
+  /**
+   * Горизонтальное выравнивание элементов внутри группы. Работает только с mode="vertical".
+   */
+  align?: AlignType;
 }
 
 /**

package/src/components/ButtonGroup/Readme.md

@@ -44,17 +44,19 @@ const ButtonGroupPropsForm = ({ caption, defaultProps, onChange }) => {
           ]}
         />
       </FormItem>
-      <FormItem top="align">
-        <Select
-          value={align}
-          onChange={(e) => handleChange("align", e.target.value)}
-          options={[
-            { label: "left", value: "left" },
-            { label: "center", value: "center" },
-            { label: "right", value: "right" },
-          ]}
-        />
-      </FormItem>
+      {mode === "vertical" && (
+        <FormItem top="align">
+          <Select
+            value={align}
+            onChange={(e) => handleChange("align", e.target.value)}
+            options={[
+              { label: "left", value: "left" },
+              { label: "center", value: "center" },
+              { label: "right", value: "right" },
+            ]}
+          />
+        </FormItem>
+      )}
       <Checkbox onChange={(e) => handleChange("stretched", e.target.checked)}>
         stretched
       </Checkbox>

package/src/components/Header/Header.css

@@ -41,15 +41,11 @@
   margin-top: -1px;
 }
 
-.Header--mode-secondary .Header__main,
+.Header--mode-secondary:not(.Header--pi) .Header__main,
 .Header--mode-tertiary .Header__main {
   color: var(--text_secondary);
 }
 
-.Header--pi .Header__main {
-  color: var(--text_primary);
-}
-
 .Header__indicator {
   color: var(--text_secondary);
   margin-left: 6px;

package/src/styles/vkcom_dark.css

@@ -21,7 +21,7 @@ body[scheme="vkcom_dark"],
   --background_hover: rgba(255, 255, 255, 0.08);
   --background_keyboard: #333333;
   --background_light: #292929;
-  --background_page: #141414;
+  --background_page: #0a0a0a;
   --background_suggestions: #333333;
   --background_text_highlighted: rgba(81, 129, 184, 0.2);
   --button_bot_shadow: #222222;
@@ -53,7 +53,7 @@ body[scheme="vkcom_dark"],
   --content_placeholder_icon: #b2b2b2;
   --content_placeholder_text: #b2b2b2;
   --content_positive_background: rgba(75, 179, 75, 0.16);
-  --content_tint_background: #333333;
+  --content_tint_background: #292929;
   --content_tint_foreground: #939393;
   --content_warning_background: rgba(255, 202, 99, 0.16);
   --control_background: #555555;
@@ -68,7 +68,7 @@ body[scheme="vkcom_dark"],
   --counter_secondary_background: #828282;
   --counter_secondary_text: #222222;
   --destructive: #ff5c5c;
-  --dynamic_blue: #5181b8;
+  --dynamic_blue: #2b81d6;
   --dynamic_gray: #aeb7c2;
   --dynamic_green: #4bb34b;
   --dynamic_neon_pink: #f45fff;
@@ -98,7 +98,7 @@ body[scheme="vkcom_dark"],
   --header_search_field_background: #424242;
   --header_search_field_tint: #b2b2b2;
   --header_tab_active_background: #656565;
-  --header_tab_active_indicator: #5181b8;
+  --header_tab_active_indicator: #2b81d6;
   --header_tab_active_text: #e1e3e6;
   --header_tab_inactive_text: #828282;
   --header_text: #e1e3e6;
@@ -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;
@@ -205,7 +205,7 @@ body[scheme="vkcom_dark"],
   --segmented_control_tint: #828282;
   --selection_off_icon: #656565;
   --separator_alpha: rgba(255, 255, 255, 0.16);
-  --separator_alternate: #333333;
+  --separator_alternate: #292929;
   --separator_common: #424242;
   --skeleton_foreground_from: #292929;
   --skeleton_foreground_to: #333333;
@@ -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: #2b81d6;
   --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: #2b81d6;
   --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: #2b81d6;
   --accent_alternate: #0077ff;
-  --action_sheet_action_foreground: #5181b8;
+  --action_sheet_action_foreground: #2b81d6;
   --action_sheet_separator: rgba(0, 0, 0, 0.12);
   --activity_indicator_tint: #aeb7c2;
-  --attach_picker_tab_active_background: #5181b8;
+  --attach_picker_tab_active_background: #2b81d6;
   --attach_picker_tab_active_icon: #ffffff;
-  --attach_picker_tab_active_text: #5181b8;
+  --attach_picker_tab_active_text: #2b81d6;
   --attach_picker_tab_inactive_background: #f5f5f5;
   --attach_picker_tab_inactive_icon: #818c99;
   --attach_picker_tab_inactive_text: #818c99;
@@ -21,17 +21,17 @@ body[scheme="vkcom_light"],
   --background_hover: rgba(174, 183, 194, 0.12);
   --background_keyboard: #dce1e6;
   --background_light: #fafbfc;
-  --background_page: #edeef0;
+  --background_page: #f0f2f5;
   --background_suggestions: #ffffff;
   --background_text_highlighted: rgba(81, 129, 184, 0.2);
   --button_bot_shadow: #cccccc;
   --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: #2a6fbd;
+  --button_outline_border: #2b81d6;
+  --button_outline_foreground: #2b81d6;
+  --button_primary_background: #2b81d6;
   --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: #2a6fbd;
+  --button_secondary_foreground_highlighted: #2a6fbd;
   --button_tertiary_background: rgba(0, 0, 0, 0);
-  --button_tertiary_foreground: #2a5885;
-  --cell_button_foreground: #2a5885;
+  --button_tertiary_foreground: #2a6fbd;
+  --cell_button_foreground: #2a6fbd;
   --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: #2a6fbd;
   --control_tint: #ffffff;
   --control_tint_muted: #828282;
-  --counter_primary_background: #5181b8;
+  --counter_primary_background: #2b81d6;
   --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: #2a6fbd;
   --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: #2b81d6;
   --header_alternate_tab_active_text: #000000;
   --header_alternate_tab_inactive_text: #99a2ad;
   --header_background: #ffffff;
@@ -103,7 +103,7 @@ 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: #2b81d6;
   --header_tab_active_text: #000000;
   --header_tab_inactive_text: #99a2ad;
   --header_text: #000000;
@@ -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: #2b81d6;
   --im_bubble_border_alternate: #dce1e6;
   --im_bubble_border_alternate_highlighted: #cccccc;
   --im_bubble_button_background: #f7f8fa;
@@ -152,9 +152,9 @@ body[scheme="vkcom_light"],
   --im_bubble_wallpaper_outgoing: #cce4ff;
   --im_bubble_wallpaper_outgoing_highlighted: #add3ff;
   --im_forward_line_tint: rgba(0, 20, 51, 0.12);
-  --im_reply_separator: #2a5885;
+  --im_reply_separator: #2a6fbd;
   --im_service_message_text: #818c99;
-  --im_text_name: #2a5885;
+  --im_text_name: #2a6fbd;
   --im_toolbar_separator: #001c3d;
   --im_toolbar_voice_msg_background: #99a2ad;
   --image_border: rgba(0, 0, 0, 0.08);
@@ -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: #2b81d6;
   --landing_login_button_foreground: #ffffff;
-  --landing_primary_button_background: #5181b8;
+  --landing_primary_button_background: #2b81d6;
   --landing_primary_button_foreground: #ffffff;
   --landing_secondary_button_background: rgba(0, 57, 115, 0.1);
-  --landing_secondary_button_foreground: #5181b8;
+  --landing_secondary_button_foreground: #2b81d6;
   --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: #2b81d6;
   --landing_text_primary: #000000;
   --landing_text_secondary: #818c99;
-  --landing_text_title: #5181b8;
+  --landing_text_title: #2b81d6;
   --like_text_tint: #ff3347;
-  --link_alternate: #2a5885;
+  --link_alternate: #2a6fbd;
   --loader_background: #edeef0;
   --loader_tint: #c5d0db;
   --loader_track_fill: #d3d9de;
-  --loader_track_value_fill: #5181b8;
+  --loader_track_value_fill: #2b81d6;
   --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: #2b81d6;
   --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,19 +227,19 @@ 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: #2b81d6;
   --tabbar_background: #f7f8fa;
   --tabbar_inactive_icon: #99a2ad;
-  --tabbar_tablet_active_icon: #5181b8;
+  --tabbar_tablet_active_icon: #2b81d6;
   --tabbar_tablet_background: #f7f8fa;
   --tabbar_tablet_inactive_icon: #99a2ad;
   --tabbar_tablet_text_primary: #000000;
   --tabbar_tablet_text_secondary: #818c99;
   --text_action_counter: #818c99;
-  --text_link: #2a5885;
+  --text_link: #2a6fbd;
   --text_link_highlighted_background: #000000;
   --text_muted: #333333;
-  --text_name: #2a5885;
+  --text_name: #2a6fbd;
   --text_placeholder: #818c99;
   --text_primary: #000000;
   --text_secondary: #818c99;