@pagopa/io-app-design-system 4.4.2 → 5.0.0-0

package/src/components/tabs/TabItem.tsx

@@ -9,12 +9,7 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import {
-  IOColors,
-  IOSpringValues,
-  hexToRgba,
-  useIOExperimentalDesign
-} from "../../core";
+import { IOColors, IOSpringValues, hexToRgba } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
@@ -93,46 +88,6 @@ const mapColorStates: Record<NonNullable<TabItem["color"]>, ColorStates> = {
   }
 };
 
-const mapLegacyColorStates: Record<
-  NonNullable<TabItem["color"]>,
-  ColorStates
-> = {
-  light: {
-    border: {
-      default: IOColors["grey-300"],
-      selected: IOColors.blue,
-      disabled: hexToRgba(IOColors.white)
-    },
-    background: {
-      default: IOColors.white,
-      selected: hexToRgba(IOColors.blue, 0.1),
-      pressed: IOColors.white
-    },
-    foreground: {
-      default: "black",
-      selected: "blue",
-      disabled: "grey-700"
-    }
-  },
-  dark: {
-    border: {
-      default: hexToRgba(IOColors.white, 0),
-      selected: IOColors.white,
-      disabled: hexToRgba(IOColors.white, 0.5)
-    },
-    background: {
-      default: "#ffffff00",
-      selected: IOColors.white,
-      pressed: IOColors.white
-    },
-    foreground: {
-      default: "white",
-      selected: "black",
-      disabled: "white"
-    }
-  }
-};
-
 const TabItem = ({
   label,
   color = "light",
@@ -150,29 +105,24 @@ const TabItem = ({
     useScaleAnimation();
   const reducedMotion = useReducedMotion();
 
-  const { isExperimental } = useIOExperimentalDesign();
-  const colors = useMemo(
-    () =>
-      isExperimental ? mapColorStates[color] : mapLegacyColorStates[color],
-    [isExperimental, color]
-  );
-
   const foregroundColor = useMemo(
     () =>
-      colors.foreground[
+      mapColorStates[color].foreground[
         selected ? "selected" : disabled ? "disabled" : "default"
       ],
-    [colors.foreground, selected, disabled]
+    [color, selected, disabled]
   );
 
   const borderColor = useMemo(
     () =>
-      colors.border[selected ? "selected" : disabled ? "disabled" : "default"],
-    [colors.border, selected, disabled]
+      mapColorStates[color].border[
+        selected ? "selected" : disabled ? "disabled" : "default"
+      ],
+    [color, selected, disabled]
   );
 
   const opaquePressedBackgroundColor = hexToRgba(
-    colors.background.pressed,
+    mapColorStates[color].background.pressed,
     0.1
   );
 
@@ -192,19 +142,22 @@ const TabItem = ({
     const pressedBackgroundColor = interpolateColor(
       progress.value,
       [0, 1],
-      [colors.background.default, opaquePressedBackgroundColor]
+      [mapColorStates[color].background.default, opaquePressedBackgroundColor]
     );
 
     const selectedBackgroundColor = interpolateColor(
       progressSelected.value,
       [0, 1],
-      [opaquePressedBackgroundColor, colors.background.selected]
+      [opaquePressedBackgroundColor, mapColorStates[color].background.selected]
     );
 
     const selectedBorderColor = interpolateColor(
       progressSelected.value,
       [0, 1],
-      [colors.border.default, colors.border.selected]
+      [
+        mapColorStates[color].border.default,
+        mapColorStates[color].border.selected
+      ]
     );
 
     return {

package/src/components/tag/Tag.tsx

@@ -5,7 +5,7 @@ import {
   IOTagRadius,
   IOTheme,
   IOThemeLight,
-  useIOExperimentalDesign,
+  useIONewTypeface,
   useIOTheme
 } from "../../core";
 import {
@@ -159,8 +159,8 @@ export const Tag = ({
   forceLightMode = false
 }: Tag) => {
   const theme = useIOTheme();
+  const { newTypefaceEnabled } = useIONewTypeface();
   const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
-  const { isExperimental } = useIOExperimentalDesign();
 
   const variantProps = getVariantProps(variant, icon);
 
@@ -207,7 +207,7 @@ export const Tag = ({
       {text && (
         <IOText
           allowFontScaling={allowFontScaling}
-          font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+          font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
           weight={"Semibold"}
           size={12}
           lineHeight={16}

package/src/components/textInput/TextInputBase.tsx

@@ -23,7 +23,7 @@ import {
   IOColors,
   IOSpacingScale,
   hexToRgba,
-  useIOExperimentalDesign,
+  useIONewTypeface,
   useIOTheme
 } from "../../core";
 import { useIOFontDynamicScale } from "../../utils/accessibility";
@@ -106,37 +106,12 @@ const styles = StyleSheet.create({
        to align to the label */
     ...(Platform.OS === "android" && { marginLeft: -4 })
   },
-  textInputStyleFont: {
-    ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Medium")
-  },
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  textInputStyleLegacyFont: {
-    ...makeFontStyleObject(
-      inputLabelFontSize,
-      "TitilliumSansPro",
-      undefined,
-      "Semibold"
-    )
-  },
   textInputLabelWrapper: {
     position: "absolute",
     zIndex: 10,
     bottom: 0,
     top: 0,
     justifyContent: "center"
-  },
-  textInputLabel: {
-    color: inputLabelColor,
-    ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Regular")
-  },
-  textInputLabelLegacyFont: {
-    color: inputLabelColor,
-    ...makeFontStyleObject(
-      inputLabelFontSize,
-      "TitilliumSansPro",
-      undefined,
-      "Regular"
-    )
   }
 });
 
@@ -234,6 +209,7 @@ export const TextInputBase = ({
   const { dynamicFontScale, spacingScaleMultiplier } = useIOFontDynamicScale();
 
   const theme = useIOTheme();
+  const { newTypefaceEnabled } = useIONewTypeface();
 
   /* Get the label width to enable the correct translation */
   const [labelWidth, setLabelWidth] = React.useState<number>(0);
@@ -359,8 +335,6 @@ export const TextInputBase = ({
     [value, derivedInputProps]
   );
 
-  const { isExperimental } = useIOExperimentalDesign();
-
   return (
     <>
       <Pressable
@@ -426,10 +400,15 @@ export const TextInputBase = ({
           blurOnSubmit={true}
           onChangeText={onChangeTextHandler}
           style={[
+            {
+              ...makeFontStyleObject(
+                inputLabelFontSize,
+                newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
+                undefined,
+                "Regular"
+              )
+            },
             styles.textInputStyle,
-            isExperimental
-              ? styles.textInputStyleFont
-              : styles.textInputStyleLegacyFont,
             !disabled
               ? { color: inputTextColor }
               : { color: inputDisabledTextColor }
@@ -464,9 +443,15 @@ export const TextInputBase = ({
             numberOfLines={1}
             accessible={false}
             style={[
-              isExperimental
-                ? styles.textInputLabel
-                : styles.textInputLabelLegacyFont,
+              {
+                ...makeFontStyleObject(
+                  inputLabelFontSize,
+                  newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
+                  undefined,
+                  "Regular"
+                ),
+                color: inputLabelColor
+              },
               animatedLabelStyle
             ]}
           >

package/src/components/typography/Body.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../core";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import {
   IOText,
@@ -17,10 +17,7 @@ export const bodyFontSize = 16;
 export const bodyLineHeight = 24;
 
 const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Regular";
-
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Regular";
 
 /**
  * `Body` typographic style
@@ -31,7 +28,7 @@ export const Body = forwardRef<View, BodyStyleProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     const defaultColor = asLink
       ? theme["interactiveElem-default"]
@@ -40,12 +37,8 @@ export const Body = forwardRef<View, BodyStyleProps>(
     const BodyProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "body", // iOS only
-      font: isExperimental ? fontName : legacyFontName,
-      weight: customWeight
-        ? customWeight
-        : isExperimental
-        ? fontWeight
-        : legacyFontWeight,
+      font: newTypefaceEnabled ? fontName : legacyFontName,
+      weight: customWeight ? customWeight : "Regular",
       size: bodyFontSize,
       lineHeight: bodyLineHeight,
       color: customColor ?? defaultColor,

package/src/components/typography/BodySmall.tsx

@@ -1,6 +1,6 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { useIONewTypeface, useIOTheme } from "../../core";
 import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import {
   IOText,
@@ -25,7 +25,7 @@ export const BodySmall = forwardRef<View, BodySmallProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     const defaultColor = asLink
       ? theme["interactiveElem-default"]
@@ -34,7 +34,7 @@ export const BodySmall = forwardRef<View, BodySmallProps>(
     const BodySmallProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "footnote" /* iOS only */,
-      font: isExperimental ? fontName : legacyFontName,
+      font: newTypefaceEnabled ? fontName : legacyFontName,
       weight: customWeight ?? "Regular",
       size: 14,
       lineHeight: 21,

package/src/components/typography/ButtonText.tsx

@@ -1,17 +1,13 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOExperimentalDesign } from "../../core";
-import { IOColors } from "../../core/IOColors";
+import { useIONewTypeface } from "../../core";
 import { IOFontFamily, IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
 export const buttonTextFontSize: IOFontSize = 16;
 /* Needed to render `ButtonOutline` and`ButtonLink` because they use
 `AnimatedText` for color transition through Reanimated */
-const defaultColor: IOColors = "white";
 const fontName: IOFontFamily = "Titillio";
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
 
 /**
@@ -19,15 +15,17 @@ const legacyFontName: IOFontFamily = "TitilliumSansPro";
  */
 export const ButtonText = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     const ButtonTextProps: IOTextProps = {
       ...props,
-      font: isExperimental ? fontName : legacyFontName,
+      font: newTypefaceEnabled ? fontName : legacyFontName,
       weight: "Semibold",
       size: buttonTextFontSize,
       lineHeight: 20,
-      color: customColor ?? defaultColor
+      /* Needed to render `ButtonOutline` and`ButtonLink` because they use
+`AnimatedText` for color transition through Reanimated */
+      color: customColor ?? "white"
     };
 
     return (

package/src/components/typography/Caption.tsx

@@ -1,17 +1,10 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
-import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { useIONewTypeface, useIOTheme } from "../../core";
+import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-const defaultColor: keyof IOTheme = "textBody-default";
-
 export const captionFontSize: IOFontSize = 12;
-const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Regular";
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
 
 /**
  * `Caption` typographic style
@@ -19,15 +12,15 @@ const legacyFontName: IOFontFamily = "TitilliumSansPro";
 export const Caption = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     const CaptionProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "caption1", // iOS only
-      font: isExperimental ? fontName : legacyFontName,
+      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
+      weight: "Regular",
       size: captionFontSize,
-      weight: fontWeight,
-      color: customColor ?? theme[defaultColor],
+      color: customColor ?? theme["textBody-default"],
       textStyle: {
         textTransform: "uppercase",
         letterSpacing: 0.5

package/src/components/typography/H1.tsx

@@ -1,19 +1,11 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
-import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { useIONewTypeface, useIOTheme } from "../../core";
+import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-const defaultColor: keyof IOTheme = "textHeading-default";
-
 export const h1FontSize: IOFontSize = 28;
 export const h1LineHeight = 42;
-const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Semibold";
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H1` typographic style
@@ -21,16 +13,16 @@ const legacyFontWeight: IOFontWeight = "Semibold";
 export const H1 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H1Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "largeTitle", // iOS only
-      font: isExperimental ? fontName : legacyFontName,
-      weight: isExperimental ? fontWeight : legacyFontWeight,
+      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
+      weight: "Semibold",
       size: h1FontSize,
       lineHeight: h1LineHeight,
-      color: customColor ?? theme[defaultColor]
+      color: customColor ?? theme["textHeading-default"]
     };
 
     return (

package/src/components/typography/H2.tsx

@@ -1,21 +1,11 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
-import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { useIONewTypeface, useIOTheme } from "../../core";
+import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-const defaultColor: keyof IOTheme = "textHeading-default";
-
 export const h2FontSize: IOFontSize = 26;
 export const h2LineHeight = 34;
-const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Semibold";
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyH2FontSize: IOFontSize = 28;
-const legacyH2LineHeight = 34;
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H2` typographic style
@@ -23,16 +13,16 @@ const legacyFontWeight: IOFontWeight = "Semibold";
 export const H2 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H2Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "title1", // iOS only
-      font: isExperimental ? fontName : legacyFontName,
-      size: isExperimental ? h2FontSize : legacyH2FontSize,
-      weight: isExperimental ? fontWeight : legacyFontWeight,
-      color: customColor ?? theme[defaultColor],
-      lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
+      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
+      weight: "Semibold",
+      size: h2FontSize,
+      lineHeight: h2LineHeight,
+      color: customColor ?? theme["textHeading-default"]
     };
 
     return (

package/src/components/typography/H3.tsx

@@ -1,7 +1,7 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOExperimentalDesign, useIOTheme } from "../../core";
-import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { useIONewTypeface, useIOTheme } from "../../core";
+import { IOFontSize, IOFontWeight } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
 type H3StyleProps = TypographicStyleProps & {
@@ -11,10 +11,6 @@ type H3StyleProps = TypographicStyleProps & {
 /* Common typographic styles */
 export const h3FontSize: IOFontSize = 22;
 export const h3LineHeight = 33;
-const fontName: IOFontFamily = "Titillio";
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
 
 /**
  * `H3` typographic style
@@ -25,12 +21,12 @@ export const H3 = forwardRef<View, H3StyleProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H3Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "title2", // iOS only
-      font: isExperimental ? fontName : legacyFontName,
+      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: customWeight ?? "Semibold",
       size: h3FontSize,
       lineHeight: h3LineHeight,

package/src/components/typography/H4.tsx

@@ -1,19 +1,11 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
-import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { useIONewTypeface, useIOTheme } from "../../core";
+import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-const defaultColor: keyof IOTheme = "textHeading-default";
-
 export const h4FontSize: IOFontSize = 20;
 export const h4LineHeight = 24;
-const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Semibold";
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H4` typographic style
@@ -21,16 +13,16 @@ const legacyFontWeight: IOFontWeight = "Semibold";
 export const H4 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H4Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "title3", // iOS only
-      font: isExperimental ? fontName : legacyFontName,
+      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
+      weight: "Semibold",
       size: h4FontSize,
-      weight: isExperimental ? fontWeight : legacyFontWeight,
-      color: customColor ?? theme[defaultColor],
-      lineHeight: h4LineHeight
+      lineHeight: h4LineHeight,
+      color: customColor ?? theme["textHeading-default"]
     };
 
     return (

package/src/components/typography/H5.tsx

@@ -1,17 +1,9 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
-import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { useIONewTypeface, useIOTheme } from "../../core";
+import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-const defaultColor: keyof IOTheme = "textHeading-default";
-
-const fontName: IOFontFamily = "Titillio";
-const fontWeight: IOFontWeight = "Semibold";
-
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
-const legacyFontWeight: IOFontWeight = "Semibold";
-
 export const h5FontSize: IOFontSize = 14;
 export const h5LineHeight = 16;
 
@@ -21,16 +13,16 @@ export const h5LineHeight = 16;
 export const H5 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H5Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "subheadline", // iOS only
-      font: isExperimental ? fontName : legacyFontName,
-      weight: isExperimental ? fontWeight : legacyFontWeight,
+      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
+      weight: "Semibold",
       size: h5FontSize,
       lineHeight: h5LineHeight,
-      color: customColor ?? theme[defaultColor],
+      color: customColor ?? theme["textHeading-default"],
       textStyle: {
         textTransform: "uppercase",
         letterSpacing: 0.5

package/src/components/typography/H6.tsx

@@ -1,18 +1,14 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
-import { IOFontFamily, IOFontSize } from "../../utils/fonts";
+import { useIONewTypeface, useIOTheme } from "../../core";
+import { IOFontSize } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-const defaultColor: keyof IOTheme = "textHeading-default";
-
 export const h6FontSize: IOFontSize = 16;
 export const h6LineHeight = 24;
-const fontName: IOFontFamily = "Titillio";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontSize: IOFontSize = 17;
-const legacyFontName: IOFontFamily = "TitilliumSansPro";
 
 /**
  * `H6` typographic style
@@ -20,16 +16,16 @@ const legacyFontName: IOFontFamily = "TitilliumSansPro";
 export const H6 = forwardRef<View, TypographicStyleProps>(
   ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const theme = useIOTheme();
-    const { isExperimental } = useIOExperimentalDesign();
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     const H6Props: IOTextProps = {
       ...props,
       dynamicTypeRamp: "headline", // iOS only
-      font: isExperimental ? fontName : legacyFontName,
-      size: isExperimental ? h6FontSize : legacyFontSize,
-      lineHeight: h6LineHeight,
+      font: newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
       weight: "Semibold",
-      color: customColor ?? theme[defaultColor]
+      size: newTypefaceEnabled ? h6FontSize : legacyFontSize,
+      lineHeight: h6LineHeight,
+      color: customColor ?? theme["textHeading-default"]
     };
 
     return (