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

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -1758,7 +1758,7 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Titillium Sans Pro",
+                "fontFamily": "Titillio",
                 "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
@@ -1850,7 +1850,7 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
           },
           {
             "color": "#555C70",
-            "fontFamily": "Titillium Sans Pro",
+            "fontFamily": "Titillio",
             "fontSize": 12,
             "fontStyle": "normal",
             "fontWeight": "600",
@@ -1919,7 +1919,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
               {},
               {
                 "color": "#555C70",
-                "fontFamily": "Titillium Sans Pro",
+                "fontFamily": "Titillio",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -1940,8 +1940,8 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2045,7 +2045,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               {},
               {
                 "color": "#555C70",
-                "fontFamily": "Titillium Sans Pro",
+                "fontFamily": "Titillio",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -2066,8 +2066,8 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2227,8 +2227,8 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2452,8 +2452,8 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2484,7 +2484,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
               "borderWidth": 0,
             },
             {
-              "color": "#0073E6",
+              "color": "#0B3EE3",
             },
             {
               "flex": 0,
@@ -2493,7 +2493,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
             },
           ]
         }
-        tintColor="#0073E6"
+        tintColor="#0B3EE3"
         vbHeight={24}
         vbWidth={24}
         width={24}
@@ -2615,8 +2615,8 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2702,7 +2702,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                 {},
                 {
                   "color": "#5517E3",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
@@ -2736,8 +2736,8 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -2800,7 +2800,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                   "width": 24,
                 },
                 {
-                  "borderColor": "#475A6D",
+                  "borderColor": "#636B82",
                 },
               ]
             }
@@ -2819,7 +2819,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                   "width": 24,
                 },
                 {
-                  "backgroundColor": "#0073E6",
+                  "backgroundColor": "#0B3EE3",
                 },
                 {
                   "opacity": 1,
@@ -2988,8 +2988,8 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -3021,8 +3021,8 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Titillium Sans Pro",
-                "fontSize": 17,
+                "fontFamily": "Titillio",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -3085,7 +3085,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
                   "width": 24,
                 },
                 {
-                  "borderColor": "#475A6D",
+                  "borderColor": "#636B82",
                 },
               ]
             }
@@ -3104,7 +3104,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
                   "width": 24,
                 },
                 {
-                  "backgroundColor": "#0073E6",
+                  "backgroundColor": "#0B3EE3",
                 },
                 {
                   "opacity": 0,

package/src/components/modules/ModuleIDP.tsx

@@ -1,11 +1,7 @@
 import * as React from "react";
 import { Image, ImageSourcePropType, StyleSheet } from "react-native";
+import { IOListItemLogoMargin, useIONewTypeface, useIOTheme } from "../../core";
 import { addCacheTimestampToUri } from "../../utils/image";
-import {
-  IOListItemLogoMargin,
-  useIOExperimentalDesign,
-  useIOTheme
-} from "../../core";
 import { IOText } from "../typography";
 import {
   PressableModuleBase,
@@ -38,8 +34,7 @@ export const ModuleIDP = ({
   accessibilityLabel
 }: ModuleIDP) => {
   const theme = useIOTheme();
-  const { isExperimental } = useIOExperimentalDesign();
-
+  const { newTypefaceEnabled } = useIONewTypeface();
   // eslint-disable-next-line no-console
   const urlLogoIDP = localLogo ? localLogo : addCacheTimestampToUri(logo);
 
@@ -50,7 +45,7 @@ export const ModuleIDP = ({
       withLooseSpacing={withLooseSpacing}
     >
       <IOText
-        font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+        font={newTypefaceEnabled ? "Titillio" : "TitilliumSansPro"}
         weight={"Semibold"}
         size={12}
         lineHeight={16}

package/src/components/numberpad/NumberButton.tsx

@@ -1,16 +1,11 @@
-import React, { memo, useCallback, useMemo } from "react";
+import React, { memo, useCallback } from "react";
 import { Pressable } from "react-native";
 import Animated, {
   interpolateColor,
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
-import {
-  IOColors,
-  IONumberPadButtonStyles,
-  hexToRgba,
-  useIOExperimentalDesign
-} from "../../core";
+import { IOColors, IONumberPadButtonStyles } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { H3 } from "../typography";
 
@@ -52,18 +47,6 @@ const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
   }
 };
 
-const legacyColorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
-  light: {
-    background: IOColors["grey-100"],
-    pressed: IOColors["grey-200"],
-    foreground: "blue"
-  },
-  dark: {
-    background: hexToRgba(IOColors.black, 0.1),
-    pressed: hexToRgba(IOColors.white, 0.5),
-    foreground: "white"
-  }
-};
 /**
  * Based on a `Pressable` element, it displays a number button with animations on press In and Out.
  *
@@ -74,19 +57,13 @@ export const NumberButton = memo(
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation("slight");
     const reducedMotion = useReducedMotion();
-    const { isExperimental } = useIOExperimentalDesign();
-
-    const colors = useMemo(
-      () => (isExperimental ? colorMap[variant] : legacyColorMap[variant]),
-      [variant, isExperimental]
-    );
 
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => ({
       backgroundColor: interpolateColor(
         progress.value,
         [0, 1],
-        [colors.background, colors.pressed]
+        [colorMap[variant].background, colorMap[variant].pressed]
       )
     }));
 
@@ -111,7 +88,7 @@ export const NumberButton = memo(
             !reducedMotion && scaleAnimatedStyle
           ]}
         >
-          <H3 color={colors.foreground}>{number}</H3>
+          <H3 color={colorMap[variant].foreground}>{number}</H3>
         </Animated.View>
       </Pressable>
     );

package/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap

@@ -100,7 +100,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -181,7 +181,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -262,7 +262,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -359,7 +359,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -440,7 +440,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -521,7 +521,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -618,7 +618,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -699,7 +699,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -780,7 +780,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
@@ -1018,7 +1018,7 @@ exports[`NumberPad Should match the snapshot 1`] = `
                 {},
                 {
                   "color": "#FFFFFF",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",

package/src/components/radio/AnimatedRadio.tsx

@@ -14,13 +14,9 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
-import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
-import {
-  IOSelectionTickLegacyVisualParams,
-  IOSelectionTickVisualParams
-} from "../../core/IOStyles";
+import { IOSelectionTickVisualParams } from "../../core/IOStyles";
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
@@ -56,24 +52,8 @@ export const AnimatedRadio = ({
 }: OwnProps) => {
   const isChecked = checked ?? false;
 
-  const { isExperimental } = useIOExperimentalDesign();
-  const borderColorOffState =
-    IOColors[IOSelectionTickVisualParams.borderColorOffState];
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyBorderColorOffState =
-    IOColors[IOSelectionTickLegacyVisualParams.borderColorOffState];
-  const borderColorProp = isExperimental
-    ? borderColorOffState
-    : legacyBorderColorOffState;
-
-  const backgroundColorOnState =
-    IOColors[IOSelectionTickVisualParams.bgColorOnState];
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyBackgroundColorOnState =
-    IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState];
-  const backgroundColorProp = isExperimental
-    ? backgroundColorOnState
-    : legacyBackgroundColorOnState;
+  const borderColor = IOColors[IOSelectionTickVisualParams.borderColorOffState];
+  const backgroundColor = IOColors[IOSelectionTickVisualParams.bgColorOnState];
 
   const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
@@ -121,21 +101,13 @@ export const AnimatedRadio = ({
       style={radioButtonWrapperSizeStyle}
     >
       <View
-        style={[
-          styles.radioBorder,
-          radioButtonSizeStyle,
-          {
-            borderColor: borderColorProp
-          }
-        ]}
+        style={[styles.radioBorder, radioButtonSizeStyle, { borderColor }]}
       />
       <Animated.View
         style={[
           styles.radioCircle,
           radioButtonSizeStyle,
-          {
-            backgroundColor: backgroundColorProp
-          },
+          { backgroundColor },
           animatedCheckboxSquare
         ]}
       />

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}
     />