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

package/src/components/searchInput/SearchInput.tsx

@@ -33,7 +33,7 @@ import {
   IOColors,
   IOSpacingScale,
   IOVisualCostants,
-  useIOExperimentalDesign,
+  useIONewTypeface,
   useIOTheme
 } from "../../core";
 import { IOFontSize, makeFontStyleObject } from "../../utils/fonts";
@@ -116,10 +116,10 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
     ref
   ) => {
     const searchInputRef = useRef<TextInput>(null);
+    const { newTypefaceEnabled } = useIONewTypeface();
 
     /* Component visual attributes */
     const theme = useIOTheme();
-    const { isExperimental } = useIOExperimentalDesign();
     const inputCaretColor = IOColors[theme["interactiveElem-default"]];
 
     /* Widths used for the transition:
@@ -250,11 +250,18 @@ export const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
             accessibilityRole={"search"}
             accessibilityLabel={accessibilityLabel}
             style={[
+              {
+                ...makeFontStyleObject(
+                  inputFontSizePlaceholder,
+                  newTypefaceEnabled ? "Titillio" : "TitilliumSansPro",
+                  undefined,
+                  "Regular"
+                )
+              },
               styles.textInput,
               Platform.OS === "ios"
                 ? styles.textInputIOS
-                : styles.textInputAndroid,
-              isExperimental ? styles.placeholder : styles.placeholderLegacy
+                : styles.textInputAndroid
             ]}
             selectionColor={inputCaretColor}
             cursorColor={inputCaretColor}
@@ -328,22 +335,6 @@ const styles = StyleSheet.create({
   iconContainer: {
     marginRight: iconMargin
   },
-  placeholder: {
-    ...makeFontStyleObject(
-      inputFontSizePlaceholder,
-      "Titillio",
-      undefined,
-      "Medium"
-    )
-  },
-  placeholderLegacy: {
-    ...makeFontStyleObject(
-      inputFontSizePlaceholder,
-      "TitilliumSansPro",
-      undefined,
-      "Semibold"
-    )
-  },
   cancelButton: {
     position: "absolute",
     right: 0,

package/src/components/stepper/Stepper.tsx

@@ -1,14 +1,6 @@
 import * as React from "react";
 import { Dimensions, LayoutChangeEvent, View } from "react-native";
-// import { useCallback } from "react";
-import { useMemo } from "react";
-import {
-  IOColors,
-  IOSpacer,
-  IOStyles,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
+import { IOColors, IOSpacer, IOStyles, IOVisualCostants } from "../../core";
 
 type StepperProps = {
   steps: number;
@@ -20,17 +12,7 @@ const colorMap: Record<string, IOColors> = {
   active: "blueIO-500"
 };
 
-const legacyColorMap: Record<string, IOColors> = {
-  active: "blue"
-};
-
 export const Stepper = ({ steps, currentStep }: StepperProps) => {
-  const { isExperimental } = useIOExperimentalDesign();
-  const colors = useMemo(
-    () => (isExperimental ? colorMap : legacyColorMap),
-    [isExperimental]
-  );
-
   const [stepWidth, setStepWidth] = React.useState(
     Dimensions.get("window").width / steps
   );
@@ -50,7 +32,7 @@ export const Stepper = ({ steps, currentStep }: StepperProps) => {
             style={{
               borderRadius: 2,
               borderBottomColor:
-                IOColors[i > currentStep - 1 ? "grey-200" : colors.active],
+                IOColors[i > currentStep - 1 ? "grey-200" : colorMap.active],
               borderBottomWidth: 2,
               width: stepWidth - STEPPER_SPACE
             }}

package/src/components/switch/NativeSwitch.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { Platform, Switch, SwitchProps } from "react-native";
-import { useIOExperimentalDesign } from "../../core";
+import { Switch, SwitchProps } from "react-native";
 import { IOColors } from "../../core/IOColors";
 import { IOSwitchVisualParams } from "../../core/IOStyles";
 
@@ -16,41 +15,24 @@ type OwnProps = Pick<
   | "importantForAccessibility"
 >;
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const bgLegacyTrackColorAndroid =
-  Platform.OS === "android" ? IOColors["grey-300"] : IOColors.greyUltraLight;
-
 export const NativeSwitch = ({
   onValueChange,
   value,
   ...accessibility
 }: OwnProps) => {
-  const { isExperimental } = useIOExperimentalDesign();
   const trackColor = {
     false: IOColors[IOSwitchVisualParams.bgColorOffState],
     true: IOColors[IOSwitchVisualParams.bgColorOnState]
   };
 
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyTrackColor = {
-    false: bgLegacyTrackColorAndroid,
-    true: IOColors.blue
-  };
-
-  const trackColorComponent = isExperimental ? trackColor : legacyTrackColor;
-
   return (
     <Switch
       {...accessibility}
       accessibilityRole="switch"
       accessibilityState={{ checked: value, disabled: accessibility.disabled }}
-      trackColor={trackColorComponent}
+      trackColor={trackColor}
       thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
-      ios_backgroundColor={
-        isExperimental
-          ? IOColors[IOSwitchVisualParams.bgColorOffState]
-          : bgLegacyTrackColorAndroid
-      }
+      ios_backgroundColor={IOColors[IOSwitchVisualParams.bgColorOffState]}
       onValueChange={onValueChange}
       value={value}
     />

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 (