@pagopa/io-app-design-system 1.7.1 → 1.8.0

package/src/components/textInput/TextInputBase.tsx

@@ -13,7 +13,12 @@ import Animated, {
   useSharedValue,
   withTiming
 } from "react-native-reanimated";
-import { IOColors, IOSpacingScale, IOStyles } from "../../core";
+import {
+  IOColors,
+  IOSpacingScale,
+  IOStyles,
+  useIOExperimentalDesign
+} from "../../core";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
 import { LabelSmall } from "../typography";
@@ -58,12 +63,18 @@ const styles = StyleSheet.create({
   },
   textInputStyle: {
     ...IOStyles.flex,
-    ...makeFontStyleObject("Regular", false, "ReadexPro"),
     fontSize: 16,
     marginTop: IOSpacingScale[2],
     lineHeight: 24,
     height: "100%"
   },
+  textInputStyleFont: {
+    ...makeFontStyleObject("Regular", false, "ReadexPro")
+  },
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  textInputStyleLegacyFont: {
+    ...makeFontStyleObject("SemiBold", false, "TitilliumWeb")
+  },
   textInputLabelWrapper: {
     position: "absolute",
     paddingHorizontal: 12,
@@ -247,6 +258,7 @@ export const TextInputBase = ({
     [value, derivedInputProps]
   );
 
+  const { isExperimental } = useIOExperimentalDesign();
   return (
     <>
       <Pressable
@@ -286,7 +298,12 @@ export const TextInputBase = ({
           onBlur={onBlurHandler}
           value={inputValue}
           onChangeText={onChangeTextHandler}
-          style={styles.textInputStyle}
+          style={[
+            styles.textInputStyle,
+            isExperimental
+              ? styles.textInputStyleFont
+              : styles.textInputStyleLegacyFont
+          ]}
         />
         {/** Left value is due to the absolute position of the label in order to let it
          * translate to top on focus

package/src/components/typography/Body.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { IOColors, IOTheme } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
@@ -11,7 +10,7 @@ type PartialAllowedColors = Extract<
 type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
 type AllowedWeight = IOFontWeight | "Regular" | "SemiBold";
 
-type OwnProps = ExternalTypographyProps<
+type BodyProps = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
@@ -22,12 +21,9 @@ export const bodyDefaultColor: AllowedColors = "bluegrey";
 export const bodyDefaultWeight: AllowedWeight = "Regular";
 
 /**
- * Typography component to render `Body` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values (if not defined) are weight: `Regular`, color: `bluegrey`
- * @param props`
- * @constructor
+ * `Body` typographic style
  */
-export const Body: React.FunctionComponent<OwnProps> = props =>
+export const Body = (props: BodyProps) =>
   useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
     defaultWeight: bodyDefaultWeight,

package/src/components/typography/BodyMonospace.tsx

@@ -0,0 +1,29 @@
+import type { IOColors } from "../../core/IOColors";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type AllowedColors = Extract<IOColors, "bluegreyDark" | "bluegrey">;
+type AllowedWeight = Extract<IOFontWeight, "Medium">;
+
+type BodyMonospaceProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+const fontName: FontFamily = "DMMono";
+const fontSize = 16;
+const lineHeight = 24;
+const monospaceDefaultWeight = "Medium";
+const monospaceDefaultcolor = "bluegrey";
+
+/**
+ * `BodyMonospace` typographic style
+ */
+export const BodyMonospace = (props: BodyMonospaceProps) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight: monospaceDefaultWeight,
+    defaultColor: monospaceDefaultcolor,
+    font: fontName,
+    fontStyle: { fontSize, lineHeight }
+  });

package/src/components/typography/ButtonText.tsx

@@ -0,0 +1,45 @@
+import { IOColors } from "src/core/IOColors";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { useIOExperimentalDesign } from "../../core";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+export type ButtonTextAllowedColors = Extract<
+  IOColors,
+  "white" | "blueIO-500" | "grey-700"
+>;
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
+
+type ButtonTextProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, ButtonTextAllowedColors>
+>;
+
+export const buttonTextFontSize = 16;
+/* Needed to render `ButtonOutline` and`ButtonLink` because they use
+`AnimatedText` for color transition through Reanimated */
+const buttonTextDefaultColor: ButtonTextAllowedColors = "white";
+const buttonTextFontName: IOFontFamily = "ReadexPro";
+const buttonTextDefaultWeight: AllowedWeight = "Regular";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyTextFontName: IOFontFamily = "TitilliumWeb";
+const legacyTextDefaultWeight: AllowedWeight = "Bold";
+
+/**
+ * `ButtonText` typographic style
+ */
+export const ButtonText = (props: ButtonTextProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, ButtonTextAllowedColors>({
+    ...props,
+    defaultWeight: isExperimental
+      ? buttonTextDefaultWeight
+      : legacyTextDefaultWeight,
+    defaultColor: buttonTextDefaultColor,
+    font: isExperimental ? buttonTextFontName : legacyTextFontName,
+    fontStyle: {
+      fontSize: buttonTextFontSize
+    }
+  });
+};

package/src/components/typography/Caption.tsx

@@ -0,0 +1,37 @@
+import { IOTheme, useIOExperimentalDesign } from "../../core";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type CaptionProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+export const captionFontSize = 12;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFont: FontFamily = "TitilliumWeb";
+
+/**
+ * `Caption` typographic style
+ */
+export const Caption = (props: CaptionProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
+    fontStyle: {
+      fontSize: captionFontSize,
+      textTransform: "uppercase"
+    }
+  });
+};

package/src/components/typography/Chip.tsx

@@ -0,0 +1,33 @@
+import { IOColors, 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";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFont: FontFamily = "TitilliumWeb";
+/**
+ * `Chip` typographic style
+ */
+export const Chip = (props: ChipProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
+    fontStyle: { fontSize: chipFontSize }
+  });
+};

package/src/components/typography/H1.tsx

@@ -1,45 +1,36 @@
-import React from "react";
-import {
-  IOColors,
-  IOColorsStatusForeground,
-  IOTheme
-} from "../../core/IOColors";
+import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
-type PartialAllowedColors = Extract<
-  IOColors,
-  "bluegreyDark" | "white" | "blue"
->;
-type AllowedColors =
-  | PartialAllowedColors
-  | IOColorsStatusForeground
-  | IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Bold">;
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "Bold">;
 
-type OwnProps = ExternalTypographyProps<
+type H1Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-export const h1FontSize = 26;
-export const h1LineHeight = 32;
-export const h1DefaultColor: AllowedColors = "bluegreyDark";
-export const h1DefaultWeight: AllowedWeight = "Bold";
+export const h1FontSize = 28;
+export const h1LineHeight = 42;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFont: FontFamily = "TitilliumWeb";
+const legacyDefaultWeight: AllowedWeight = "Bold";
 
 /**
- * Typography component to render H1 text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
- * @param props
- * @constructor
+ * `H1` typographic style
  */
-export const H1: React.FC<OwnProps> = props => {
-  const fontName: FontFamily = "TitilliumWeb";
+export const H1 = (props: H1Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight: h1DefaultWeight,
-    defaultColor: h1DefaultColor,
-    font: fontName,
+    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
     fontStyle: { fontSize: h1FontSize, lineHeight: h1LineHeight }
   });
 };

package/src/components/typography/H2.tsx

@@ -1,45 +1,36 @@
-import React from "react";
-import {
-  IOColors,
-  IOColorsStatusForeground,
-  IOTheme
-} from "../../core/IOColors";
+import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
-type PartialAllowedColors = Extract<
-  IOColors,
-  "bluegreyDark" | "white" | "blue" | "bluegrey"
->;
-type AllowedColors =
-  | PartialAllowedColors
-  | IOColorsStatusForeground
-  | IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "SemiBold">;
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
 
-type OwnProps = ExternalTypographyProps<
+type H2Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-export const h2FontSize = 20;
-export const h2LineHeight = 24;
-export const h2DefaultColor: AllowedColors = "bluegreyDark";
-export const h2DefaultWeight: AllowedWeight = "Bold";
+export const h2FontSize = 26;
+export const h2LineHeight = 39;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFont: FontFamily = "TitilliumWeb";
+const legacyDefaultWeight: AllowedWeight = "Bold";
 
 /**
- * Typography component to render `H2` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
- * @param props
- * @constructor
+ * `H2` typographic style
  */
-export const H2: React.FC<OwnProps> = props => {
-  const fontName: FontFamily = "TitilliumWeb";
+export const H2 = (props: H2Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight: h2DefaultWeight,
-    defaultColor: h2DefaultColor,
-    font: fontName,
+    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
     fontStyle: { fontSize: h2FontSize, lineHeight: h2LineHeight }
   });
 };

package/src/components/typography/H3.tsx

@@ -1,35 +1,36 @@
-import * as React from "react";
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
-import { IOColorsStatusForeground, IOTheme } from "../../core";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign } from "../../core";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
 
-type AllowedColors = IOColorsStatusForeground | IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular">;
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular" | "Bold">;
 
-type OwnProps = ExternalTypographyProps<
+type H3Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 /* Common typographic styles */
 export const h3FontSize = 22;
 export const h3LineHeight = 33;
-/* New typographic styles */
-const h3FontName: IOFontFamily = "ReadexPro";
-const h3DefaultColor: AllowedColors = "black";
-const h3DefaultWeight: AllowedWeight = "Regular";
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
 
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFontName: FontFamily = "TitilliumWeb";
+const legacyDefaultColor: AllowedColors = "bluegreyDark";
+const legacyDefaultWeight: AllowedWeight = "Bold";
 /**
- * Typography component to render `H2` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Bold`, color: `bluegreyDark`
- * @param props
- * @constructor
+ * `H3` typographic style
  */
-export const H3: React.FunctionComponent<OwnProps> = props =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
+export const H3 = (props: H3Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight: h3DefaultWeight,
-    defaultColor: h3DefaultColor,
-    font: h3FontName,
+    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+    defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
+    font: isExperimental ? font : legacyFontName,
     fontStyle: { fontSize: h3FontSize, lineHeight: h3LineHeight }
   });
+};

package/src/components/typography/H4.tsx

@@ -1,37 +1,36 @@
-import React from "react";
-import { IOColorsStatusForeground, IOTheme } from "../../core/IOColors";
+import { IOTheme, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
-type AllowedColors = IOColorsStatusForeground | IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
 
-type OwnProps = ExternalTypographyProps<
+type H4Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-/* Common typographic styles */
 export const h4FontSize = 20;
-export const h4LineHeight = 24;
+export const h4LineHeight = 30;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFontName: FontFamily = "TitilliumWeb";
+const legacyDefaultColor: AllowedColors = "bluegreyDark";
+const legacyDefaultWeight: AllowedWeight = "SemiBold";
 
 /**
- * Typography component to render `H4` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Regular/SemiBold`, color: `black/bluegreyDark` if design system is enabled or not
- * @param props
- * @constructor
+ * `H4` typographic style
  */
-export const H4: React.FC<OwnProps> = props => {
-  /* New typographic styles */
-  const font: FontFamily = "ReadexPro";
-  const defaultColor: AllowedColors = "black";
-  const defaultWeight: AllowedWeight = "Regular";
-
+export const H4 = (props: H4Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight,
-    defaultColor,
-    font,
+    defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
+    defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
+    font: isExperimental ? font : legacyFontName,
     fontStyle: { fontSize: h4FontSize, lineHeight: h4LineHeight }
   });
 };

package/src/components/typography/H5.tsx

@@ -1,66 +1,34 @@
-import React from "react";
-import type { IOColors } from "../../core/IOColors";
+import { IOTheme } from "../../core/IOColors";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps } from "./common";
+import { ExternalTypographyProps, TypographyProps } from "./common";
 
-// these colors are allowed only when the weight is SemiBold
-type AllowedSemiBoldColors = Extract<
-  IOColors,
-  "bluegreyDark" | "bluegrey" | "bluegreyLight" | "blue" | "white" | "red"
->;
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "SemiBold">;
 
-// when the weight is bold, only the white color is allowed
-type AllowedRegularColors = Extract<
-  IOColors,
-  | "bluegreyDark"
-  | "bluegrey"
-  | "bluegreyLight"
-  | "blue"
-  | "white"
-  | "red"
-  | "grey"
+type H5Props = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
 >;
 
-// all the possible colors
-type AllowedColors = AllowedSemiBoldColors | AllowedRegularColors;
-
-// all the possible weight
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
-
-// these are the properties allowed only if weight is undefined or SemiBold
-type SemiBoldProps = {
-  weight?: Extract<IOFontWeight, "SemiBold">;
-  color?: AllowedSemiBoldColors;
-};
-
-// these are the properties allowed only if weight is Bold
-type RegularProps = {
-  weight: Extract<IOFontWeight, "Regular">;
-  color?: AllowedRegularColors;
-};
-
-type BoldKindProps = SemiBoldProps | RegularProps;
-
-type OwnProps = ExternalTypographyProps<BoldKindProps>;
-
 export const h5FontSize = 14;
-export const h5DefaultColor: AllowedColors = "bluegreyDark";
-export const h5DefaultWeight: AllowedWeight = "SemiBold";
+export const h5LineHeight = 16;
+const font: FontFamily = "TitilliumWeb";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "SemiBold";
 
 /**
- * Typography component to render `H5` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `SemiBold`, color: `bluegreyDark`
- * @param props
- * @constructor
+ * `H5` typographic style
  */
-export const H5: React.FC<OwnProps> = props => {
-  const fontName: FontFamily = "TitilliumWeb";
-  return useTypographyFactory<AllowedWeight, AllowedColors>({
+export const H5 = (props: H5Props) =>
+  useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight: h5DefaultWeight,
-    defaultColor: h5DefaultColor,
-    font: fontName,
-    fontStyle: { fontSize: h5FontSize }
+    defaultWeight,
+    defaultColor,
+    font,
+    fontStyle: {
+      fontSize: h5FontSize,
+      lineHeight: h5LineHeight,
+      textTransform: "uppercase",
+      letterSpacing: 0.5
+    }
   });
-};

package/src/components/typography/H6.tsx

@@ -1,35 +1,37 @@
-import React from "react";
-import { IOTheme, IOThemeLight } from "../../core/IOColors";
+import { IOTheme, IOThemeLight, useIOExperimentalDesign } from "../../core";
 import { FontFamily, IOFontWeight } from "../../utils/fonts";
 import { useTypographyFactory } from "./Factory";
 import { ExternalTypographyProps, TypographyProps } from "./common";
 
 // when the weight is bold, only these color are allowed
 type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
-type AllowedWeight = Extract<IOFontWeight, "SemiBold" | "Regular">;
+type AllowedWeight = Extract<IOFontWeight, "Regular" | "SemiBold">;
 
-type OwnProps = ExternalTypographyProps<
+type H6Props = ExternalTypographyProps<
   TypographyProps<AllowedWeight, AllowedColors>
 >;
 
 export const h6FontSize = 16;
-export const h6LineHeight = 20;
-export const h6DefaultColor: AllowedColors = IOThemeLight["textBody-default"];
-export const h6DefaultWeight: AllowedWeight = "Regular";
+export const h6LineHeight = 24;
+const h6DefaultColor: AllowedColors = IOThemeLight["textBody-default"];
+const h6DefaultWeight: AllowedWeight = "Regular";
+const fontName: FontFamily = "ReadexPro";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFontName: FontFamily = "TitilliumWeb";
+const legacyDefaultWeight: AllowedWeight = "SemiBold";
 
 /**
- * Typography component to render `H6` text with font size {@link fontSize} and fontFamily {@link fontName}.
- * default values(if not defined) are weight: `Regular`, color: `black`
- * @param props
- * @constructor
+ * `H6` typographic style
  */
-export const H6: React.FC<OwnProps> = props => {
-  const fontName: FontFamily = "ReadexPro";
+export const H6 = (props: H6Props) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
   return useTypographyFactory<AllowedWeight, AllowedColors>({
     ...props,
-    defaultWeight: h6DefaultWeight,
+    defaultWeight: isExperimental ? h6DefaultWeight : legacyDefaultWeight,
     defaultColor: h6DefaultColor,
-    font: fontName,
+    font: isExperimental ? fontName : legacyFontName,
     fontStyle: { fontSize: h6FontSize, lineHeight: h6LineHeight }
   });
 };

package/src/components/typography/Hero.tsx

@@ -0,0 +1,34 @@
+import { useIOExperimentalDesign, IOTheme } from "../../core";
+import { FontFamily, IOFontWeight } from "../../utils/fonts";
+import { useTypographyFactory } from "./Factory";
+import { ExternalTypographyProps, TypographyProps } from "./common";
+
+type AllowedColors = IOTheme["textHeading-default"];
+type AllowedWeight = Extract<IOFontWeight, "Regular">;
+
+type HeroProps = ExternalTypographyProps<
+  TypographyProps<AllowedWeight, AllowedColors>
+>;
+
+export const heroFontSize = 32;
+export const heroLineHeight = 48;
+const font: FontFamily = "ReadexPro";
+const defaultColor: AllowedColors = "black";
+const defaultWeight: AllowedWeight = "Regular";
+
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const legacyFont: FontFamily = "TitilliumWeb";
+/**
+ * `Hero` typographic style
+ */
+export const Hero = (props: HeroProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+
+  return useTypographyFactory<AllowedWeight, AllowedColors>({
+    ...props,
+    defaultWeight,
+    defaultColor,
+    font: isExperimental ? font : legacyFont,
+    fontStyle: { fontSize: heroFontSize, lineHeight: heroLineHeight }
+  });
+};