[IOAPPX-435] Improve typography by standardising sizes and removing redundant styles

example/src/components/AssetViewerBox.tsx

@@ -1,4 +1,4 @@
-import { IOColors, LabelSmall, hexToRgba } from "@pagopa/io-app-design-system";
+import { IOColors, BodySmall, hexToRgba } from "@pagopa/io-app-design-system";
 import React from "react";
 import {
   ImageBackground,
@@ -157,13 +157,13 @@ export const AssetViewerBox = ({
       }}
     >
       {name && (
-        <LabelSmall
+        <BodySmall
           color={"bluegrey"}
           style={{ alignSelf: "flex-start" }}
           weight={"Regular"}
         >
           {name}
-        </LabelSmall>
+        </BodySmall>
       )}
     </View>
   </View>

example/src/pages/Advice.tsx

@@ -55,7 +55,7 @@ const renderFeatureInfo = () => {
     },
     {
       text: "Questa la seconda parte in grassetto. ",
-      weight: "Bold"
+      weight: "Semibold"
     },
     {
       text: "Questa la terza parte che torna "

example/src/pages/Colors.tsx

@@ -1,4 +1,5 @@
 import {
+  BodySmall,
   H2,
   H3,
   IOColorGradients,
@@ -12,7 +13,6 @@ import {
   IOThemeLight,
   IOVisualCostants,
   LabelMini,
-  LabelSmall,
   VSpacer,
   hexToRgba,
   themeStatusColorsDarkMode,
@@ -336,9 +336,9 @@ const GradientBox = ({ name, colors }: GradientBoxProps) => {
         {last && <Text style={styles.colorPill}>{last}</Text>}
       </LinearGradient>
       {name && (
-        <LabelSmall weight="Regular" color="grey-700">
+        <BodySmall weight="Regular" color="grey-700">
           {name}
-        </LabelSmall>
+        </BodySmall>
       )}
     </View>
   );

example/src/pages/Layout.tsx

@@ -10,7 +10,7 @@ import {
   IOSpacer,
   IOVisualCostants,
   LabelMini,
-  LabelSmall,
+  BodySmall,
   VSpacer,
   VStack,
   useIOTheme
@@ -201,10 +201,10 @@ const VStackBlocks = () => {
             backgroundColor: IOColors[theme["appBackground-tertiary"]]
           }}
         >
-          <LabelSmall
+          <BodySmall
             weight="Regular"
             color={theme["textBody-tertiary"]}
-          >{`Block n.${i + 1}`}</LabelSmall>
+          >{`Block n.${i + 1}`}</BodySmall>
         </View>
       ))}
       <View
@@ -216,9 +216,9 @@ const VStackBlocks = () => {
           backgroundColor: IOColors[theme["appBackground-tertiary"]]
         }}
       >
-        <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+        <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
           Different height
-        </LabelSmall>
+        </BodySmall>
       </View>
     </>
   );
@@ -240,9 +240,9 @@ const HStackBlocks = () => {
             backgroundColor: IOColors[theme["appBackground-tertiary"]]
           }}
         >
-          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>{`${
+          <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>{`${
             i + 1
-          }`}</LabelSmall>
+          }`}</BodySmall>
         </View>
       ))}
       <View
@@ -254,9 +254,9 @@ const HStackBlocks = () => {
           backgroundColor: IOColors[theme["appBackground-tertiary"]]
         }}
       >
-        <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+        <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
           Growing block
-        </LabelSmall>
+        </BodySmall>
       </View>
     </>
   );

example/src/pages/MainScreen.tsx

@@ -2,7 +2,7 @@ import {
   Divider,
   H1,
   IOStyles,
-  LabelSmall,
+  BodySmall,
   ListItemNav,
   ListItemSwitch,
   VSpacer,
@@ -78,9 +78,9 @@ const MainScreen = (props: Props) => {
     <View style={{ marginTop: 24, marginBottom: 8 }}>
       <H1>{title}</H1>
       {description && (
-        <LabelSmall weight={"Regular"} color={theme["textBody-tertiary"]}>
+        <BodySmall weight={"Regular"} color={theme["textBody-tertiary"]}>
           {description}
-        </LabelSmall>
+        </BodySmall>
       )}
     </View>
   );

example/src/pages/NumberPad.tsx

@@ -1,12 +1,12 @@
 import {
+  BodySmall,
   CodeInput,
   ContentWrapper,
   H1,
   H5,
   IOColors,
   IOStyles,
   IOVisualCostants,
-  LabelSmall,
   ListItemSwitch,
   NumberPad,
   VSpacer,
@@ -69,12 +69,12 @@ export const NumberPadScreen = () => {
           <H5>{"Value Typed on the NumberPad component"}</H5>
           <VSpacer />
 
-          <LabelSmall
+          <BodySmall
             weight="Semibold"
             color={blueBackground ? "white" : "black"}
           >
             {value}
-          </LabelSmall>
+          </BodySmall>
         </View>
         <VSpacer />
         <CodeInput

example/src/pages/OTPInput.tsx

@@ -7,7 +7,7 @@ import {
   IOStyles,
   VSpacer,
   OTPInput,
-  LabelSmall,
+  BodySmall,
   ButtonSolid,
   ContentWrapper,
   ButtonOutline
@@ -117,7 +117,7 @@ export const OTPInputScreen = () => {
             <OTPWrapper secret />
             <VSpacer />
             <H5>Validation+Secret</H5>
-            <LabelSmall>Correct OTP {`${OTP_COMPARE}`}</LabelSmall>
+            <BodySmall>Correct OTP {`${OTP_COMPARE}`}</BodySmall>
             <VSpacer />
             <OTPWrapper secret validation />
             <VSpacer />

example/src/pages/Selection.tsx

@@ -1,13 +1,13 @@
 import {
   AnimatedMessageCheckbox,
+  BodySmall,
   CheckboxLabel,
   Divider,
   H2,
   HSpacer,
   IOColors,
   IOStyles,
   IOVisualCostants,
-  LabelSmall,
   ListItemCheckbox,
   ListItemSwitch,
   NativeSwitch,
@@ -179,13 +179,13 @@ const mockRadioItems = (): ReadonlyArray<RadioItem<string>> => [
   {
     value: "Let's try with JSX description",
     description: (
-      <LabelSmall color="grey-700" weight="Regular">
+      <BodySmall color="grey-700" weight="Regular">
         Ti contatteranno solo i servizi che hanno qualcosa di importante da
         dirti.{" "}
         <Text style={{ color: IOColors["grey-700"], fontWeight: "600" }}>
           Potrai sempre disattivare le comunicazioni che non ti interessano.
         </Text>
-      </LabelSmall>
+      </BodySmall>
     ),
     id: "example-jsx-element"
   },