From a433a31eed1d9ba94cf99fa52d0068383fff89f9 Mon Sep 17 00:00:00 2001
From: vpsmolina <verasmolinap@mail.ru>
Date: Mon, 20 Jan 2025 10:09:20 +0300
Subject: [PATCH] fix: update Typography

---
 .../components/PanelSpinner/PanelSpinner.tsx  |  2 +-
 .../progress/components/Spinner/Loader.tsx    |  2 +-
 .../progress/components/Spinner/Spinner.tsx   |  2 +-
 src/shared/ui/BlockView.tsx                   |  4 ++--
 src/shared/ui/Header.tsx                      |  6 ++----
 src/widgets/Chart/ui/RenderHeader.tsx         |  4 ++--
 src/widgets/Chart/ui/RenderSectionItem.tsx    |  4 ++--
 .../Core/Controls/ui/ControlListWidget.tsx    | 19 +++++++++----------
 src/widgets/Core/Controls/ui/SliderWidget.tsx | 15 +++++++--------
 src/widgets/Core/Controls/ui/SwipeWidget.tsx  |  4 ++--
 src/widgets/Core/Other/ui/AvatarWidget.tsx    | 14 +++++++-------
 src/widgets/Core/Other/ui/BadgeWidget.tsx     |  6 +++---
 src/widgets/Core/Other/ui/CarouselWidget.tsx  | 10 +++++-----
 .../Core/Other/ui/CollapsibleWidget.tsx       |  6 +++---
 src/widgets/Core/Other/ui/DotsWidget.tsx      | 10 +++++-----
 src/widgets/Core/Other/ui/StatusWidget.tsx    |  6 +++---
 .../Core/Popup/ui/ActionSheetWidget.tsx       |  6 ++----
 src/widgets/Core/Popup/ui/ModalsWidget.tsx    |  4 ++--
 src/widgets/Core/Popup/ui/PopupBaseWidget.tsx |  4 ++--
 src/widgets/Core/Popup/ui/SnackbarWidget.tsx  |  4 ++--
 src/widgets/Core/Popup/ui/TooltipWidget.tsx   |  7 ++++---
 .../Core/Progress/ui/IndicatorWidget.tsx      | 14 ++++++++++----
 .../Core/Progress/ui/PanelSpinnerWidget.tsx   | 19 ++++++-------------
 src/widgets/Core/Styles/ui/ShadowWidget.tsx   |  8 ++++----
 .../Core/Styles/ui/SimpleIconWidget.tsx       |  4 ++--
 src/widgets/KeyboardAware/Bottom.tsx          | 10 ++--------
 26 files changed, 91 insertions(+), 103 deletions(-)

diff --git a/packages/core/src/progress/components/PanelSpinner/PanelSpinner.tsx b/packages/core/src/progress/components/PanelSpinner/PanelSpinner.tsx
index ca5bec8fe..838c0b8f1 100644
--- a/packages/core/src/progress/components/PanelSpinner/PanelSpinner.tsx
+++ b/packages/core/src/progress/components/PanelSpinner/PanelSpinner.tsx
@@ -33,7 +33,7 @@ const PanelSpinner: FC<PanelSpinnerProps> = props => {
         <SimpleIcon
           name="icon-check"
           size={px(48)}
-          color={theme.colors.IconBase}
+          color={theme.colors.IconAccent}
         />
       </View>
     );
diff --git a/packages/core/src/progress/components/Spinner/Loader.tsx b/packages/core/src/progress/components/Spinner/Loader.tsx
index 96f6d663f..bf40b27d7 100644
--- a/packages/core/src/progress/components/Spinner/Loader.tsx
+++ b/packages/core/src/progress/components/Spinner/Loader.tsx
@@ -35,7 +35,7 @@ const Loader: FC<LoaderProps> = props => {
     }
   };
 
-  return getSize(fill || colors.ElementBase);
+  return getSize(fill || colors.ElementAccent);
 };
 
 export default Loader;
diff --git a/packages/core/src/progress/components/Spinner/Spinner.tsx b/packages/core/src/progress/components/Spinner/Spinner.tsx
index b0408f18a..3d0e61886 100644
--- a/packages/core/src/progress/components/Spinner/Spinner.tsx
+++ b/packages/core/src/progress/components/Spinner/Spinner.tsx
@@ -34,7 +34,7 @@ const Spinner: FC<SpinnerProps> = props => {
   return (
     <Animated.View
       style={{alignSelf: 'center', transform: [{rotate: rotation}]}}>
-      <Loader size={size} fill={fill || colors.ElementBase} {...otherProps} />
+      <Loader size={size} fill={fill || colors.ElementAccent} {...otherProps} />
     </Animated.View>
   );
 };
diff --git a/src/shared/ui/BlockView.tsx b/src/shared/ui/BlockView.tsx
index 1a0b32954..be927c525 100644
--- a/src/shared/ui/BlockView.tsx
+++ b/src/shared/ui/BlockView.tsx
@@ -1,4 +1,4 @@
-import {createStyles, TypographyLegacy, useStyles, View} from '@/shared/ui';
+import {createStyles, Typography, useStyles, View} from '@/shared/ui';
 
 export const BlockView = ({
   item,
@@ -23,7 +23,7 @@ export const BlockView = ({
           backgroundColor: backgroundColor || colors.BgAccent,
         },
       ]}>
-      <TypographyLegacy>{item}</TypographyLegacy>
+      <Typography>{item}</Typography>
     </View>
   );
 };
diff --git a/src/shared/ui/Header.tsx b/src/shared/ui/Header.tsx
index 6fc7b567b..297e92967 100644
--- a/src/shared/ui/Header.tsx
+++ b/src/shared/ui/Header.tsx
@@ -1,11 +1,9 @@
 import {FC} from 'react';
 
-import {TypographyLegacy} from '@/shared/ui';
+import {Title} from '@/shared/ui';
 
 const Header: FC<{title: string}> = ({title}) => {
-  return (
-    <TypographyLegacy font={'Regular-Primary-H5'}>{title}</TypographyLegacy>
-  );
+  return <Title font={'Primary-H5'}>{title}</Title>;
 };
 
 export default Header;
diff --git a/src/widgets/Chart/ui/RenderHeader.tsx b/src/widgets/Chart/ui/RenderHeader.tsx
index 57f949051..6c1c33bad 100644
--- a/src/widgets/Chart/ui/RenderHeader.tsx
+++ b/src/widgets/Chart/ui/RenderHeader.tsx
@@ -1,7 +1,7 @@
 import Animated, {useAnimatedProps} from 'react-native-reanimated';
 import {TextInput} from 'react-native';
 
-import {IRenderHeader, TypographyLegacy, useFontBody, View} from '@/shared/ui';
+import {IRenderHeader, Typography, useFontBody, View} from '@/shared/ui';
 
 interface IRenderHeaderProps {
   header: Parameters<IRenderHeader>[number];
@@ -36,7 +36,7 @@ const RenderHeader = ({header}: IRenderHeaderProps) => {
         underlineColorAndroid="transparent"
         style={fontStyle}
       />
-      <TypographyLegacy>Last record</TypographyLegacy>
+      <Typography>Last record</Typography>
       <AnimatedText
         animatedProps={animatedPropsRecord}
         editable={false}
diff --git a/src/widgets/Chart/ui/RenderSectionItem.tsx b/src/widgets/Chart/ui/RenderSectionItem.tsx
index 73236be28..0058d573c 100644
--- a/src/widgets/Chart/ui/RenderSectionItem.tsx
+++ b/src/widgets/Chart/ui/RenderSectionItem.tsx
@@ -7,7 +7,7 @@ import {
   createStyles,
   IChartTransition,
   ISharedChartState,
-  TypographyLegacy,
+  Typography,
   useStyles,
 } from '@/shared/ui';
 
@@ -42,7 +42,7 @@ const RenderSectionItem = ({period, state, transition, index}: IProps) => {
 
   return (
     <Animated.View style={[styles.container, animationStyles]}>
-      <TypographyLegacy style={styles.text}>{period}</TypographyLegacy>
+      <Typography style={styles.text}>{period}</Typography>
     </Animated.View>
   );
 };
diff --git a/src/widgets/Core/Controls/ui/ControlListWidget.tsx b/src/widgets/Core/Controls/ui/ControlListWidget.tsx
index 82e90c10b..4348c8f3d 100644
--- a/src/widgets/Core/Controls/ui/ControlListWidget.tsx
+++ b/src/widgets/Core/Controls/ui/ControlListWidget.tsx
@@ -5,7 +5,8 @@ import {
   ControlsList,
   createStyles,
   Radio,
-  TypographyLegacy,
+  Title,
+  Typography,
   useStyles,
   View,
 } from '@/shared/ui';
@@ -18,36 +19,34 @@ export const ControlListWidget = () => {
 
   return (
     <View style={styles.container}>
-      <TypographyLegacy font={'Regular-Primary-H5'}>
-        ControlsList
-      </TypographyLegacy>
+      <Title font={'Primary-H5'}>ControlsList</Title>
       <View>
-        <TypographyLegacy font={'Regular-Primary-L'}>checkbox</TypographyLegacy>
+        <Typography font={'Regular-Primary-L'}>checkbox</Typography>
         <ControlsList
           onChange={setCheckbox}
           values={checkbox}
           listStyles={styles.container}>
           <CheckBox value={'option one'}>
-            <TypographyLegacy>option one</TypographyLegacy>
+            <Typography>option one</Typography>
           </CheckBox>
           <CheckBox value={'option two'}>
-            <TypographyLegacy>option two</TypographyLegacy>
+            <Typography>option two</Typography>
           </CheckBox>
         </ControlsList>
       </View>
 
       <View>
-        <TypographyLegacy font={'Regular-Primary-L'}>radio</TypographyLegacy>
+        <Typography font={'Regular-Primary-L'}>radio</Typography>
         <ControlsList
           onChange={setRadio}
           values={radio}
           single={true}
           listStyles={styles.container}>
           <Radio value={'option one'}>
-            <TypographyLegacy>option one</TypographyLegacy>
+            <Typography>option one</Typography>
           </Radio>
           <Radio value={'option two'}>
-            <TypographyLegacy>option two</TypographyLegacy>
+            <Typography>option two</Typography>
           </Radio>
         </ControlsList>
       </View>
diff --git a/src/widgets/Core/Controls/ui/SliderWidget.tsx b/src/widgets/Core/Controls/ui/SliderWidget.tsx
index b5af916b4..91fe7a632 100644
--- a/src/widgets/Core/Controls/ui/SliderWidget.tsx
+++ b/src/widgets/Core/Controls/ui/SliderWidget.tsx
@@ -3,7 +3,8 @@ import {useState} from 'react';
 import {
   createStyles,
   Slider,
-  TypographyLegacy,
+  Title,
+  Typography,
   useStyles,
   View,
 } from '@/shared/ui';
@@ -15,9 +16,9 @@ export const SliderWidget = () => {
   const [low, setLow] = useState(0);
   return (
     <View style={styles.container}>
-      <TypographyLegacy font={'Regular-Primary-H5'}>Slider</TypographyLegacy>
+      <Title font={'Primary-H5'}>Slider</Title>
       <View>
-        <TypographyLegacy font={'Regular-Primary-L'}>default</TypographyLegacy>
+        <Typography font={'Regular-Primary-L'}>default</Typography>
         <Slider
           min={0}
           max={100}
@@ -29,12 +30,10 @@ export const SliderWidget = () => {
             setRange({low, high});
           }}
         />
-        <TypographyLegacy>{`Low: ${range.low} High: ${range.high} Step: ${5}`}</TypographyLegacy>
+        <Typography>{`Low: ${range.low} High: ${range.high} Step: ${5}`}</Typography>
       </View>
       <View>
-        <TypographyLegacy font={'Regular-Primary-L'}>
-          disableRange
-        </TypographyLegacy>
+        <Typography font={'Regular-Primary-L'}>disableRange</Typography>
         <Slider
           min={0}
           max={100}
@@ -45,7 +44,7 @@ export const SliderWidget = () => {
             setLow(low);
           }}
         />
-        <TypographyLegacy>{`Low: ${low} Step: ${1}`}</TypographyLegacy>
+        <Typography>{`Low: ${low} Step: ${1}`}</Typography>
       </View>
     </View>
   );
diff --git a/src/widgets/Core/Controls/ui/SwipeWidget.tsx b/src/widgets/Core/Controls/ui/SwipeWidget.tsx
index e8ecb280f..437007631 100644
--- a/src/widgets/Core/Controls/ui/SwipeWidget.tsx
+++ b/src/widgets/Core/Controls/ui/SwipeWidget.tsx
@@ -1,12 +1,12 @@
 import {useState} from 'react';
 
-import {Swipe, TypographyLegacy, View} from '@/shared/ui';
+import {Swipe, Title, View} from '@/shared/ui';
 
 export const SwipeWidget = () => {
   const [active, setActive] = useState(false);
   return (
     <View>
-      <TypographyLegacy font={'Regular-Primary-H5'}>Swipe</TypographyLegacy>
+      <Title font={'Primary-H5'}>Swipe</Title>
       <Swipe onPress={setActive} active={active} disabled={false} />
     </View>
   );
diff --git a/src/widgets/Core/Other/ui/AvatarWidget.tsx b/src/widgets/Core/Other/ui/AvatarWidget.tsx
index a83508fa5..349ec4bbf 100644
--- a/src/widgets/Core/Other/ui/AvatarWidget.tsx
+++ b/src/widgets/Core/Other/ui/AvatarWidget.tsx
@@ -8,7 +8,7 @@ import {
   ICounterTypes,
   IIndicatorTypes,
   IStatusTypes,
-  TypographyLegacy,
+  Typography,
   useStyles,
   View,
 } from '@/shared/ui';
@@ -28,13 +28,13 @@ export const AvatarWidget = () => {
     <View>
       <Header title={'Avatar'} />
       <View style={styles.container}>
-        <TypographyLegacy>{'Content'}</TypographyLegacy>
+        <Typography>{'Content'}</Typography>
         <View style={styles.row}>
           <Avatar user={userTest} />
           <Avatar user={userWithLogoTest} />
           <Avatar user={userTest} type={IAvatarTypes.icon} />
         </View>
-        <TypographyLegacy>{'State'}</TypographyLegacy>
+        <Typography>{'State'}</Typography>
         <View style={styles.row}>
           <Avatar
             user={userTest}
@@ -48,14 +48,14 @@ export const AvatarWidget = () => {
             disabled={true}
           />
         </View>
-        <TypographyLegacy>{'Size'}</TypographyLegacy>
+        <Typography>{'Size'}</Typography>
         <View style={styles.row}>
           <Avatar user={userTest} size={IAvatarSize.S} />
           <Avatar user={userTest} size={IAvatarSize.M} />
           <Avatar user={userTest} size={IAvatarSize.L} />
           <Avatar user={userTest} size={IAvatarSize.XL} />
         </View>
-        <TypographyLegacy>{'Badge'}</TypographyLegacy>
+        <Typography>{'Badge'}</Typography>
         <View style={styles.row}>
           <Avatar
             user={userWithLogoTest}
@@ -76,7 +76,7 @@ export const AvatarWidget = () => {
             }}
           />
         </View>
-        <TypographyLegacy>{'Badge counter'}</TypographyLegacy>
+        <Typography>{'Badge counter'}</Typography>
         <View style={styles.row}>
           <Avatar
             user={userWithLogoTest}
@@ -119,7 +119,7 @@ export const AvatarWidget = () => {
             }}
           />
         </View>
-        <TypographyLegacy>{'Group'}</TypographyLegacy>
+        <Typography>{'Group'}</Typography>
         <View style={styles.row}>
           <AvatarGroup
             groups={defaultGroupDateTest.concat(defaultGroupDateTest)}
diff --git a/src/widgets/Core/Other/ui/BadgeWidget.tsx b/src/widgets/Core/Other/ui/BadgeWidget.tsx
index fc49cc956..8dbc39220 100644
--- a/src/widgets/Core/Other/ui/BadgeWidget.tsx
+++ b/src/widgets/Core/Other/ui/BadgeWidget.tsx
@@ -5,7 +5,7 @@ import {
   ICounterSize,
   ICounterTypes,
   IIndicatorTypes,
-  TypographyLegacy,
+  Typography,
   useStyles,
   View,
 } from '@/shared/ui';
@@ -18,12 +18,12 @@ export const BadgeWidget = () => {
     <View>
       <Header title={'Badge'} />
       <View style={styles.container}>
-        <TypographyLegacy>{'BadgeIndicator'}</TypographyLegacy>
+        <Typography>{'BadgeIndicator'}</Typography>
         <View style={styles.row}>
           <BadgeIndicator type={IIndicatorTypes.primary} />
           <BadgeIndicator type={IIndicatorTypes.secondary} style={{right: 0}} />
         </View>
-        <TypographyLegacy>{'Counter'}</TypographyLegacy>
+        <Typography>{'Counter'}</Typography>
         <View style={styles.row}>
           <Counter
             size={ICounterSize.small}
diff --git a/src/widgets/Core/Other/ui/CarouselWidget.tsx b/src/widgets/Core/Other/ui/CarouselWidget.tsx
index 367b5d8cf..bd5c3a00a 100644
--- a/src/widgets/Core/Other/ui/CarouselWidget.tsx
+++ b/src/widgets/Core/Other/ui/CarouselWidget.tsx
@@ -5,7 +5,7 @@ import {
   createStyles,
   LoopCarousel,
   px,
-  TypographyLegacy,
+  Typography,
   useStyles,
   View,
 } from '@/shared/ui';
@@ -21,7 +21,7 @@ export const CarouselWidget = () => {
   return (
     <View style={styles.container}>
       <Header title={'Carousel'} />
-      <TypographyLegacy>Carousel</TypographyLegacy>
+      <Typography>Carousel</Typography>
       <Carousel
         data={data}
         sliderItem={item => <BlockView item={item} width={ITEM_WIDTH} />}
@@ -29,14 +29,14 @@ export const CarouselWidget = () => {
         sideMargin={2}
         keyExtractor={item => item.toString()}
       />
-      <TypographyLegacy>LoopCarousel</TypographyLegacy>
+      <Typography>LoopCarousel</Typography>
       <LoopCarousel
         data={data}
         sliderItem={item => <BlockView item={item} width={ITEM_WIDTH} />}
         itemWidth={ITEM_WIDTH}
         sideMargin={2}
       />
-      <TypographyLegacy>AutoCarousel</TypographyLegacy>
+      <Typography>AutoCarousel</Typography>
       <AutoCarousel
         data={data}
         sliderItem={item => <BlockView item={item} width={ITEM_WIDTH} />}
@@ -44,7 +44,7 @@ export const CarouselWidget = () => {
         sideMargin={2}
         keyExtractor={item => item.toString()}
       />
-      <TypographyLegacy>AutoLoopCarousel</TypographyLegacy>
+      <Typography>AutoLoopCarousel</Typography>
       <AutoLoopCarousel
         data={data}
         sliderItem={item => <BlockView item={item} width={ITEM_WIDTH} />}
diff --git a/src/widgets/Core/Other/ui/CollapsibleWidget.tsx b/src/widgets/Core/Other/ui/CollapsibleWidget.tsx
index fd23be94b..4bd3d8e5a 100644
--- a/src/widgets/Core/Other/ui/CollapsibleWidget.tsx
+++ b/src/widgets/Core/Other/ui/CollapsibleWidget.tsx
@@ -1,7 +1,7 @@
 import {
   Collapsible,
   createStyles,
-  TypographyLegacy,
+  Typography,
   useStyles,
   View,
 } from '@/shared/ui';
@@ -15,10 +15,10 @@ export const CollapsibleWidget = () => {
       <Header title={'Collapsible'} />
       <View style={styles.container}>
         <Collapsible title={'Collapsible'}>
-          <TypographyLegacy>
+          <Typography>
             Component to wrap content in Collapsible element with trigger to
             open and close
-          </TypographyLegacy>
+          </Typography>
         </Collapsible>
       </View>
     </View>
diff --git a/src/widgets/Core/Other/ui/DotsWidget.tsx b/src/widgets/Core/Other/ui/DotsWidget.tsx
index 92f2ca175..47956e5e4 100644
--- a/src/widgets/Core/Other/ui/DotsWidget.tsx
+++ b/src/widgets/Core/Other/ui/DotsWidget.tsx
@@ -4,7 +4,7 @@ import {
   createStyles,
   Dots,
   TouchableOpacity,
-  TypographyLegacy,
+  Typography,
   useStyles,
   View,
 } from '@/shared/ui';
@@ -32,15 +32,15 @@ export const DotsWidget = () => {
       <Header title={'Dots'} />
       <View style={styles.container}>
         <TouchableOpacity onPress={onPressDecrease}>
-          <TypographyLegacy font={'Regular-Secondary-XS'}>
+          <Typography font={'Regular-Secondary-XS'}>
             Press me to decrease dot
-          </TypographyLegacy>
+          </Typography>
         </TouchableOpacity>
         <Dots length={length} activeDot={activeDot} />
         <TouchableOpacity onPress={onPressIncrease}>
-          <TypographyLegacy font={'Regular-Secondary-XS'}>
+          <Typography font={'Regular-Secondary-XS'}>
             Press me to increase dot
-          </TypographyLegacy>
+          </Typography>
         </TouchableOpacity>
       </View>
     </View>
diff --git a/src/widgets/Core/Other/ui/StatusWidget.tsx b/src/widgets/Core/Other/ui/StatusWidget.tsx
index d54335bbd..aca0518a7 100644
--- a/src/widgets/Core/Other/ui/StatusWidget.tsx
+++ b/src/widgets/Core/Other/ui/StatusWidget.tsx
@@ -3,7 +3,7 @@ import {
   IStatusState,
   IStatusType,
   Status,
-  TypographyLegacy,
+  Typography,
   useStyles,
   View,
 } from '@/shared/ui';
@@ -16,7 +16,7 @@ export const StatusWidget = () => {
     <View>
       <Header title={'Status'} />
       <View style={styles.container}>
-        <TypographyLegacy>Dot</TypographyLegacy>
+        <Typography>Dot</Typography>
         <View style={styles.row}>
           <Status type={IStatusType.dot} state={IStatusState.green} />
           <Status type={IStatusType.dot} state={IStatusState.blue} />
@@ -24,7 +24,7 @@ export const StatusWidget = () => {
           <Status type={IStatusType.dot} state={IStatusState.gray} />
           <Status type={IStatusType.dot} state={IStatusState.orange} />
         </View>
-        <TypographyLegacy>Tag</TypographyLegacy>
+        <Typography>Tag</Typography>
         <View style={styles.row}>
           <Status
             type={IStatusType.tag}
diff --git a/src/widgets/Core/Popup/ui/ActionSheetWidget.tsx b/src/widgets/Core/Popup/ui/ActionSheetWidget.tsx
index 566103a3b..a4f58314d 100644
--- a/src/widgets/Core/Popup/ui/ActionSheetWidget.tsx
+++ b/src/widgets/Core/Popup/ui/ActionSheetWidget.tsx
@@ -2,7 +2,7 @@ import {
   ActionSheetBase,
   Button,
   IItemType,
-  TypographyLegacy,
+  Title,
   usePopups,
   View,
 } from '@/shared/ui';
@@ -11,9 +11,7 @@ export const ActionSheetWidget = () => {
   const {openPopup} = usePopups();
   return (
     <View>
-      <TypographyLegacy font={'Regular-Primary-H5'}>
-        ActionSheet
-      </TypographyLegacy>
+      <Title font={'Primary-H5'}>ActionSheet</Title>
       <Button
         text={'ActionSheet'}
         onPress={() =>
diff --git a/src/widgets/Core/Popup/ui/ModalsWidget.tsx b/src/widgets/Core/Popup/ui/ModalsWidget.tsx
index f9f0e3da6..44452ea19 100644
--- a/src/widgets/Core/Popup/ui/ModalsWidget.tsx
+++ b/src/widgets/Core/Popup/ui/ModalsWidget.tsx
@@ -5,10 +5,10 @@ import {
   ModalError,
   ModalLoading,
   ModalSuccess,
-  TypographyLegacy,
   usePopups,
   useStyles,
   View,
+  Title,
 } from '@/shared/ui';
 
 export const ModalsWidget = () => {
@@ -17,7 +17,7 @@ export const ModalsWidget = () => {
 
   return (
     <View style={styles.container}>
-      <TypographyLegacy font={'Regular-Primary-H5'}>Modal</TypographyLegacy>
+      <Title font={'Primary-H5'}>Modal</Title>
       <Button
         text={'ModalAsk'}
         onPress={() =>
diff --git a/src/widgets/Core/Popup/ui/PopupBaseWidget.tsx b/src/widgets/Core/Popup/ui/PopupBaseWidget.tsx
index 3d23c2a20..2285f50d8 100644
--- a/src/widgets/Core/Popup/ui/PopupBaseWidget.tsx
+++ b/src/widgets/Core/Popup/ui/PopupBaseWidget.tsx
@@ -2,7 +2,7 @@ import {
   Button,
   createStyles,
   PopupBase,
-  TypographyLegacy,
+  Title,
   usePopups,
   useStyles,
   View,
@@ -14,7 +14,7 @@ export const PopupBaseWidget = () => {
 
   return (
     <View style={styles.container}>
-      <TypographyLegacy font={'Regular-Primary-H5'}>Popup</TypographyLegacy>
+      <Title font={'Primary-H5'}>Popup</Title>
       <Button
         text={'PopupBase'}
         onPress={() =>
diff --git a/src/widgets/Core/Popup/ui/SnackbarWidget.tsx b/src/widgets/Core/Popup/ui/SnackbarWidget.tsx
index 7a84b1c09..dbf1a7fd8 100644
--- a/src/widgets/Core/Popup/ui/SnackbarWidget.tsx
+++ b/src/widgets/Core/Popup/ui/SnackbarWidget.tsx
@@ -3,7 +3,7 @@ import {
   createStyles,
   IPosition,
   SnackbarBase,
-  TypographyLegacy,
+  Title,
   usePopups,
   useStyles,
   View,
@@ -14,7 +14,7 @@ export const SnackbarWidget = () => {
   const {openPopup} = usePopups();
   return (
     <View style={styles.container}>
-      <TypographyLegacy font={'Regular-Primary-H5'}>Snackbar</TypographyLegacy>
+      <Title font={'Primary-H5'}>Snackbar</Title>
       <Button
         text={'Snackbar top'}
         onPress={() =>
diff --git a/src/widgets/Core/Popup/ui/TooltipWidget.tsx b/src/widgets/Core/Popup/ui/TooltipWidget.tsx
index 846af895c..f46f430e3 100644
--- a/src/widgets/Core/Popup/ui/TooltipWidget.tsx
+++ b/src/widgets/Core/Popup/ui/TooltipWidget.tsx
@@ -5,8 +5,9 @@ import {
   createStyles,
   IPlacement,
   IPosition,
+  Title,
   TooltipBase,
-  TypographyLegacy,
+  Typography,
   usePopups,
   useStyles,
   View,
@@ -19,9 +20,9 @@ export const TooltipWidget = () => {
 
   return (
     <View style={styles.container}>
-      <TypographyLegacy font={'Regular-Primary-H5'}>Tooltip</TypographyLegacy>
+      <Title font={'Primary-H5'}>Tooltip</Title>
       <View ref={ref} style={styles.ref}>
-        <TypographyLegacy>Ref component</TypographyLegacy>
+        <Typography>Ref component</Typography>
       </View>
       <Button
         text={'Tooltip'}
diff --git a/src/widgets/Core/Progress/ui/IndicatorWidget.tsx b/src/widgets/Core/Progress/ui/IndicatorWidget.tsx
index f2b36daa4..5574706d1 100644
--- a/src/widgets/Core/Progress/ui/IndicatorWidget.tsx
+++ b/src/widgets/Core/Progress/ui/IndicatorWidget.tsx
@@ -1,6 +1,12 @@
 import {useState} from 'react';
 
-import {Indicator, TouchableOpacity, TypographyLegacy, View} from '@/shared/ui';
+import {
+  Indicator,
+  Title,
+  TouchableOpacity,
+  Typography,
+  View,
+} from '@/shared/ui';
 
 export const IndicatorWidget = () => {
   const [percent, setPercent] = useState(10);
@@ -13,12 +19,12 @@ export const IndicatorWidget = () => {
 
   return (
     <View>
-      <TypographyLegacy font={'Regular-Primary-H5'}>Indicator</TypographyLegacy>
+      <Title font={'Primary-H5'}>Indicator</Title>
       <Indicator percent={percent} />
       <TouchableOpacity onPress={onPress}>
-        <TypographyLegacy font={'Regular-Secondary-XS'}>
+        <Typography font={'Regular-Secondary-XS'}>
           Press me to change percent
-        </TypographyLegacy>
+        </Typography>
       </TouchableOpacity>
     </View>
   );
diff --git a/src/widgets/Core/Progress/ui/PanelSpinnerWidget.tsx b/src/widgets/Core/Progress/ui/PanelSpinnerWidget.tsx
index 2bda3717f..65d6af84a 100644
--- a/src/widgets/Core/Progress/ui/PanelSpinnerWidget.tsx
+++ b/src/widgets/Core/Progress/ui/PanelSpinnerWidget.tsx
@@ -1,7 +1,8 @@
 import {
   createStyles,
   PanelSpinner,
-  TypographyLegacy,
+  Title,
+  Typography,
   useStyles,
   View,
 } from '@/shared/ui';
@@ -10,27 +11,19 @@ export const PanelSpinnerWidget = () => {
   const [styles] = useStyles(stylesFn);
   return (
     <View>
-      <TypographyLegacy font={'Regular-Primary-H5'}>
-        PanelSpinner
-      </TypographyLegacy>
+      <Title font={'Primary-H5'}>PanelSpinner</Title>
       <View style={styles.container}>
         <View style={styles.panelContainer}>
           <PanelSpinner isLoading={true} />
-          <TypographyLegacy font={'Regular-Primary-XS'}>
-            isLoading=true
-          </TypographyLegacy>
+          <Typography font={'Regular-Primary-S'}>isLoading=true</Typography>
         </View>
         <View style={styles.panelContainer}>
           <PanelSpinner isLoading={false} />
-          <TypographyLegacy font={'Regular-Primary-XS'}>
-            isLoading=false
-          </TypographyLegacy>
+          <Typography font={'Regular-Primary-S'}>isLoading=false</Typography>
         </View>
         <View style={styles.panelContainer}>
           <PanelSpinner isLoading={true} onCancel={() => {}} />
-          <TypographyLegacy font={'Regular-Primary-XS'}>
-            with onCancel
-          </TypographyLegacy>
+          <Typography font={'Regular-Primary-S'}>with onCancel</Typography>
         </View>
       </View>
     </View>
diff --git a/src/widgets/Core/Styles/ui/ShadowWidget.tsx b/src/widgets/Core/Styles/ui/ShadowWidget.tsx
index ebc54d546..590c3563a 100644
--- a/src/widgets/Core/Styles/ui/ShadowWidget.tsx
+++ b/src/widgets/Core/Styles/ui/ShadowWidget.tsx
@@ -1,4 +1,4 @@
-import {createStyles, TypographyLegacy, useStyles, View} from '@/shared/ui';
+import {createStyles, Typography, useStyles, View} from '@/shared/ui';
 import Header from '@/shared/ui/Header';
 
 export const ShadowWidget = () => {
@@ -9,15 +9,15 @@ export const ShadowWidget = () => {
       <View style={styles.content}>
         <View style={styles.item}>
           <View style={[styles.box, styles.shadowSmall]} />
-          <TypographyLegacy>shadowSmall</TypographyLegacy>
+          <Typography>shadowSmall</Typography>
         </View>
         <View style={styles.item}>
           <View style={[styles.box, styles.shadowMedium]} />
-          <TypographyLegacy>shadowMedium</TypographyLegacy>
+          <Typography>shadowMedium</Typography>
         </View>
         <View style={styles.item}>
           <View style={[styles.box, styles.shadowLarge]} />
-          <TypographyLegacy>shadowLarge</TypographyLegacy>
+          <Typography>shadowLarge</Typography>
         </View>
       </View>
     </View>
diff --git a/src/widgets/Core/Styles/ui/SimpleIconWidget.tsx b/src/widgets/Core/Styles/ui/SimpleIconWidget.tsx
index a56a21749..36e61fd5f 100644
--- a/src/widgets/Core/Styles/ui/SimpleIconWidget.tsx
+++ b/src/widgets/Core/Styles/ui/SimpleIconWidget.tsx
@@ -1,6 +1,6 @@
 import {useState} from 'react';
 
-import {SimpleIconAlbum, TypographyLegacy, View} from '@/shared/ui';
+import {SimpleIconAlbum, Typography, View} from '@/shared/ui';
 import Header from '@/shared/ui/Header';
 
 export const SimpleIconWidget = () => {
@@ -9,7 +9,7 @@ export const SimpleIconWidget = () => {
     <View>
       <Header title={'SimpleIcons'} />
       <SimpleIconAlbum onPress={setSimpleIconName} />
-      <TypographyLegacy>{simpleIconName}</TypographyLegacy>
+      <Typography>{simpleIconName}</Typography>
     </View>
   );
 };
diff --git a/src/widgets/KeyboardAware/Bottom.tsx b/src/widgets/KeyboardAware/Bottom.tsx
index 9795fe556..934e5f60d 100644
--- a/src/widgets/KeyboardAware/Bottom.tsx
+++ b/src/widgets/KeyboardAware/Bottom.tsx
@@ -1,16 +1,10 @@
-import {
-  Button,
-  createStyles,
-  TypographyLegacy,
-  useStyles,
-  View,
-} from '@/shared/ui';
+import {Button, createStyles, Typography, useStyles, View} from '@/shared/ui';
 
 export const BottomComponent = () => {
   const [styles] = useStyles(style);
   return (
     <View style={styles.container}>
-      <TypographyLegacy>BottomComponents</TypographyLegacy>
+      <Typography>BottomComponents</Typography>
       <Button text={'Submit'} />
     </View>
   );