@vkontakte/vkui 4.37.0 → 4.37.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.37.0",
+  "version": "4.37.2",
   "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.0",
     "@vkontakte/eslint-config": "3.1.0",
     "@vkontakte/icons": "^1.184.0",
     "@vkontakte/vk-bridge": "^2.1.3",
@@ -185,7 +185,7 @@
     "babel-dev": "yarn babel-base --out-dir dist/ --watch",
     "babel-cjs-dev": "yarn babel-base --config-file ./babel.cjs.config.js --out-dir dist/cjs/ --watch",
     "tsc-dev": "tsc --emitDeclarationOnly --declaration --outDir dist/ --watch --preserveWatchOutput",
-    "build:types": "yarn tsc && yarn tsc-cssm",
+    "build:types": "yarn tsc && yarn tsc-cjs && yarn tsc-cssm",
     "build:no-types": "concurrently 'yarn:babel' 'yarn:babel-cssm' 'yarn:babel-cjs' 'yarn:postcss'",
     "build": "yarn build:types && yarn build:no-types",
     "postcss": "cross-env NODE_ENV=production concurrently 'yarn:postcss-bundle' 'yarn:postcss-modules'",

package/src/components/AppRoot/ScrollContext.tsx

@@ -15,6 +15,15 @@ const clearDisableScrollStyle = (node: HTMLElement) => {
   });
 };
 
+const getPageYOffsetWithoutKeyboardHeight = (window: Window) => {
+  // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.
+  //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,
+  //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.
+  const diffOfClientHeightAndViewportHeight =
+    window.document.documentElement.clientHeight - window.innerHeight;
+  return window.pageYOffset - diffOfClientHeightAndViewportHeight;
+};
+
 export interface ScrollContextInterface {
   getScroll(this: void): { x: number; y: number };
   scrollTo(this: void, x?: number, y?: number): void;
@@ -45,7 +54,10 @@ export const GlobalScrollController = ({ children }: ScrollControllerProps) => {
   const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
 
   const getScroll = React.useCallback<ScrollContextInterface["getScroll"]>(
-    () => ({ x: window!.pageXOffset, y: window!.pageYOffset }),
+    () => ({
+      x: window!.pageXOffset,
+      y: getPageYOffsetWithoutKeyboardHeight(window!),
+    }),
     [window]
   );
   const scrollTo = React.useCallback<ScrollContextInterface["scrollTo"]>(

package/src/components/FixedLayout/FixedLayout.tsx

@@ -46,7 +46,7 @@ export const FixedLayout = ({
   const { colRef } = React.useContext(SplitColContext);
   const doResize = () =>
     setWidth(colRef?.current ? `${colRef.current.offsetWidth}px` : undefined);
-  React.useEffect(doResize, [colRef]);
+  React.useEffect(doResize, [colRef, platform]);
   useGlobalEventListener(window, "resize", doResize);
 
   return (

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/View/View.tsx

@@ -301,6 +301,8 @@ export const View = ({
 
       if (e.startX <= 70 && !swipingBack && history && history.length > 1) {
         if (activePanel !== null) {
+          // Note: вызываем закрытие клавиатуры. В iOS это нативное поведение при свайпе.
+          blurActiveElement(document);
           scrolls.current[activePanel] = scroll?.getScroll().y;
         }
 

package/src/components/WriteBar/Readme.md

@@ -46,15 +46,15 @@ const WriteBarExample = (props) => {
             after={
               <Fragment>
                 <WriteBarIcon aria-label="Эмоджи и стикеры">
-                  <Icon28SmileOutline />
+                  <Icon28SmileOutline aria-hidden />
                 </WriteBarIcon>
 
                 <WriteBarIcon aria-label="Записать видео-сообщение">
-                  <Icon28CameraOutline />
+                  <Icon28CameraOutline aria-hidden />
                 </WriteBarIcon>
 
                 <WriteBarIcon aria-label="Записать голосовое сообщение">
-                  <Icon28VoiceOutline />
+                  <Icon28VoiceOutline aria-hidden />
                 </WriteBarIcon>
               </Fragment>
             }
@@ -71,13 +71,13 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text2.length === 0 && (
                   <WriteBarIcon aria-label="Открыть меню бота">
-                    <Icon28KeyboardBotsOutline />
+                    <Icon28KeyboardBotsOutline aria-hidden />
                   </WriteBarIcon>
                 )}
 
                 {text2.length > 0 && (
                   <WriteBarIcon aria-label="Эмоджи и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
               </Fragment>
@@ -86,13 +86,13 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text2.length === 0 && (
                   <WriteBarIcon aria-label="Эмоджи и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
 
                 {text2.length === 0 && (
                   <WriteBarIcon aria-label="Записать голосовое сообщение">
-                    <Icon28VoiceOutline />
+                    <Icon28VoiceOutline aria-hidden />
                   </WriteBarIcon>
                 )}
 
@@ -112,7 +112,7 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text3.length > 0 && (
                   <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
               </Fragment>
@@ -121,7 +121,7 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text3.length === 0 && (
                   <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
 
@@ -141,7 +141,7 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text4.length > 0 && (
                   <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
               </Fragment>
@@ -150,7 +150,7 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text4.length === 0 && (
                   <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
 
@@ -186,7 +186,7 @@ const WriteBarExample = (props) => {
                 <Fragment>
                   {text.length > 0 && (
                     <WriteBarIcon aria-label="Смайлы и стикеры">
-                      <Icon28SmileOutline />
+                      <Icon28SmileOutline aria-hidden />
                     </WriteBarIcon>
                   )}
                 </Fragment>
@@ -195,13 +195,13 @@ const WriteBarExample = (props) => {
                 <Fragment>
                   {text.length === 0 && (
                     <WriteBarIcon aria-label="Смайлы и стикеры">
-                      <Icon28SmileOutline />
+                      <Icon28SmileOutline aria-hidden />
                     </WriteBarIcon>
                   )}
 
                   {text.length === 0 && (
                     <WriteBarIcon aria-label="Записать голосовое сообщение">
-                      <Icon28VoiceOutline />
+                      <Icon28VoiceOutline aria-hidden />
                     </WriteBarIcon>
                   )}
 

package/src/components/WriteBar/WriteBar.tsx

@@ -107,7 +107,7 @@ export const WriteBar = ({
       className={className}
       style={style}
     >
-      <form vkuiClass="WriteBar__form" onSubmit={(e) => e.preventDefault()}>
+      <div vkuiClass="WriteBar__form">
         {hasReactNode(before) && (
           <div vkuiClass="WriteBar__before">{before}</div>
         )}
@@ -127,7 +127,7 @@ export const WriteBar = ({
         </div>
 
         {hasReactNode(after) && <div vkuiClass="WriteBar__after">{after}</div>}
-      </form>
+      </div>
     </div>
   );
 };

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -53,21 +53,30 @@ export const WriteBarIcon = ({
   switch (mode) {
     case "attach":
       icon =
-        platform === IOS ? <Icon28AddCircleOutline /> : <Icon28AttachOutline />;
+        platform === IOS ? (
+          <Icon28AddCircleOutline aria-hidden />
+        ) : (
+          <Icon28AttachOutline aria-hidden />
+        );
       ariaLabel = "Прикрепить файл";
       break;
 
     case "send":
-      icon = platform === IOS ? <Icon48WritebarSend /> : <Icon24Send />;
+      icon =
+        platform === IOS ? (
+          <Icon48WritebarSend aria-hidden />
+        ) : (
+          <Icon24Send aria-hidden />
+        );
       ariaLabel = "Отправить";
       break;
 
     case "done":
       icon =
         platform === IOS ? (
-          <Icon48WritebarDone />
+          <Icon48WritebarDone aria-hidden />
         ) : (
-          <Icon28CheckCircleOutline />
+          <Icon28CheckCircleOutline aria-hidden />
         );
       ariaLabel = "Готово";
       break;

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;
@@ -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: #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;