fix: update Typography

lad-tech · Jan 20, 2025 · a433a31 · a433a31
1 parent 68e4b20
commit a433a31
Show file tree

Hide file tree

Showing 26 changed files with 91 additions and 103 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -5,7 +5,7 @@ import {
   createStyles,
   LoopCarousel,
   px,
-  TypographyLegacy,
+  Typography,
   useStyles,
   View,
 } from '@/shared/ui';
@@ -21,30 +21,30 @@ 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} />}
         itemWidth={ITEM_WIDTH}
         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} />}
         itemWidth={ITEM_WIDTH}
         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
@@ -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
@@ -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>