@pagopa/io-app-design-system 1.41.0 → 2.0.0-0

package/src/components/typography/Chip.tsx

@@ -1,45 +1,33 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import {
-  IOColors,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-
-type AllowedColors = IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular">;
-
-type ChipProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const chipFontSize = 12;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
+const fontName: IOFontFamily = "ReadexPro";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
 /**
  * `Chip` typographic style
  */
-export const Chip = React.forwardRef<View, ChipProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Chip = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const ChipProps: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "caption2" /* iOS only */,
-      defaultWeight,
-      defaultColor,
-      font: isExperimental ? font : legacyFont,
-      fontStyle: { fontSize: chipFontSize }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "caption2", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      weight: "Regular",
+      size: 12,
+      color: customColor ?? theme["textBody-default"]
+    };
+
+    return (
+      <IOText ref={ref} {...ChipProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/Factory.tsx

@@ -71,6 +71,7 @@ function isDefaultFactoryProps<WeightPropsType, ColorsPropsType>(
  * The default values can be calculated specifying some fallback values using {@link DefaultArgumentProps}
  * or with a factory function to define some custom behaviour using {@link DefaultFactoryProps}
  * @param props
+ * @deprecated Use `IOText` instead. Or use the new typographic styles that use it.
  */
 export function useTypographyFactory<
   WeightPropsType extends IOFontWeight,

package/src/components/typography/H1.tsx

@@ -1,49 +1,44 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H1Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h1FontSize = 28;
+export const h1FontSize: IOFontSize = 28;
 export const h1LineHeight = 42;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
-const legacyH1FontSize = 31;
+const legacyH1FontSize: IOFontSize = 31;
 const legacyH1LineHeight = 43;
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H1` typographic style
  */
-export const H1 = React.forwardRef<View, H1Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H1 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H1Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "largeTitle" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor,
-      font: isExperimental ? fontName : legacyFont,
-      fontStyle: {
-        fontSize: isExperimental ? h1FontSize : legacyH1FontSize,
-        lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight
-      }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "largeTitle", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: isExperimental ? h1FontSize : legacyH1FontSize,
+      lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...H1Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/H2.tsx

@@ -1,49 +1,44 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H2Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h2FontSize = 26;
+export const h2FontSize: IOFontSize = 26;
 export const h2LineHeight = 39;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
-const legacyH2FontSize = 28;
+const legacyH2FontSize: IOFontSize = 28;
 const legacyH2LineHeight = 40;
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H2` typographic style
  */
-export const H2 = React.forwardRef<View, H2Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H2 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H2Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "title1" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor,
-      font: isExperimental ? fontName : legacyFont,
-      fontStyle: {
-        fontSize: isExperimental ? h2FontSize : legacyH2FontSize,
-        lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
-      }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "title1", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      size: isExperimental ? h2FontSize : legacyH2FontSize,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      color: customColor ?? theme[defaultColor],
+      lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
+    };
+
+    return (
+      <IOText ref={ref} {...H2Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/H3.tsx

@@ -1,48 +1,43 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular">;
-
-type H3Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
 /* Common typographic styles */
-export const h3FontSize = 22;
+export const h3FontSize: IOFontSize = 22;
 export const h3LineHeight = 33;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontName: FontFamily = "TitilliumSansPro";
-const legacyDefaultColor: AllowedColors = "bluegreyDark";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
+
 /**
  * `H3` typographic style
  */
-export const H3 = React.forwardRef<View, H3Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H3 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H3Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "title2" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
+      dynamicTypeRamp: "title2", // iOS only
       font: isExperimental ? fontName : legacyFontName,
-      fontStyle: {
-        fontSize: h3FontSize,
-        lineHeight: h3LineHeight
-      }
-    },
-    ref
-  );
-});
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: h3FontSize,
+      lineHeight: h3LineHeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...H3Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/H4.tsx

@@ -1,47 +1,42 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H4Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h4FontSize = 20;
+export const h4FontSize: IOFontSize = 20;
 export const h4LineHeight = 24;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontName: FontFamily = "TitilliumSansPro";
-const legacyDefaultColor: AllowedColors = "bluegreyDark";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H4` typographic style
  */
-export const H4 = React.forwardRef<View, H4Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+export const H4 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const H4Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "title3" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
-      font: isExperimental ? font : legacyFontName,
-      fontStyle: {
-        fontSize: h4FontSize,
-        lineHeight: h4LineHeight
-      }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "title3", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      size: h4FontSize,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      color: customColor ?? theme[defaultColor],
+      lineHeight: h4LineHeight
+    };
+
+    return (
+      <IOText ref={ref} {...H4Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/H5.tsx

@@ -1,45 +1,39 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOTheme } from "../../core";
+import { IOFontSize } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H5Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h5FontSize = 14;
+export const h5FontSize: IOFontSize = 14;
 export const h5LineHeight = 16;
-const font: FontFamily = "TitilliumSansPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Semibold";
 
 /**
  * `H5` typographic style
  */
-export const H5 = React.forwardRef<View, H5Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H5 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H5Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "subheadline" /* iOS only */,
-      defaultWeight,
-      defaultColor,
-      font,
-      fontStyle: {
-        fontSize: h5FontSize,
-        lineHeight: h5LineHeight,
+      dynamicTypeRamp: "subheadline", // iOS only
+      font: "TitilliumSansPro",
+      weight: "Semibold",
+      size: h5FontSize,
+      lineHeight: h5LineHeight,
+      color: customColor ?? theme[defaultColor],
+      textStyle: {
         textTransform: "uppercase",
         letterSpacing: 0.5
       }
-    },
-    ref
-  );
-});
+    };
+
+    return (
+      <IOText ref={ref} {...H5Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/H6.tsx

@@ -1,55 +1,44 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import {
-  IOTheme,
-  IOThemeLight,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-// when the weight is bold, only these color are allowed
-type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H6Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h6FontSize = 16;
+export const h6FontSize: IOFontSize = 16;
 export const h6LineHeight = 24;
-const h6DefaultColor: AllowedColors = IOThemeLight["textBody-default"];
-const h6DefaultWeight: AllowedWeight = "Regular";
-const fontName: FontFamily = "ReadexPro";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontSize = 18;
+const legacyFontSize: IOFontSize = 18;
 const legacyLineHeight = 25;
-const legacyFontName: FontFamily = "TitilliumSansPro";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H6` typographic style
  */
-export const H6 = React.forwardRef<View, H6Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H6 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H6Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "headline" /* iOS only */,
-      defaultWeight: isExperimental ? h6DefaultWeight : legacyDefaultWeight,
-      defaultColor: h6DefaultColor,
+      dynamicTypeRamp: "headline", // iOS only
       font: isExperimental ? fontName : legacyFontName,
-      fontStyle: {
-        fontSize: isExperimental ? h6FontSize : legacyFontSize,
-        lineHeight: isExperimental ? h6LineHeight : legacyLineHeight
-      }
-    },
-    ref
-  );
-});
+      size: isExperimental ? h6FontSize : legacyFontSize,
+      lineHeight: isExperimental ? h6LineHeight : legacyLineHeight,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...H6Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);

package/src/components/typography/Hero.tsx

@@ -1,46 +1,43 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOExperimentalDesign, IOTheme } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type HeroProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const heroFontSize = 32;
+export const heroFontSize: IOFontSize = 32;
 export const heroLineHeight = 48;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
-const legacyWeight: AllowedWeight = "Semibold";
-const legacyHeroFontSize = 35;
+const legacyHeroFontSize: IOFontSize = 35;
 const legacyHeroLineHeight = 49;
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `Hero` typographic style
  */
-export const Hero = React.forwardRef<View, HeroProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Hero = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const HeroProps: IOTextProps = {
       ...props,
-      defaultWeight: isExperimental ? defaultWeight : legacyWeight,
-      defaultColor,
-      font: isExperimental ? fontName : legacyFont,
-      fontStyle: {
-        fontSize: isExperimental ? heroFontSize : legacyHeroFontSize,
-        lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight
-      }
-    },
-    ref
-  );
-});
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: isExperimental ? heroFontSize : legacyHeroFontSize,
+      lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...HeroProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);