@pagopa/io-app-design-system 4.5.0 → 4.5.2

package/src/components/buttons/IconButtonContained.tsx

@@ -64,13 +64,13 @@ const mapColorStates: Record<
   neutral: {
     background: {
       default: IOColors.white,
-      pressed: IOColors.greyUltraLight,
+      pressed: IOColors["grey-50"],
       disabled: "transparent"
     },
     icon: {
-      default: IOColors.bluegrey,
+      default: IOColors["grey-700"],
       pressed: IOColors.black,
-      disabled: IOColors.grey
+      disabled: IOColors["grey-450"]
     }
   },
   // Contrast button
@@ -95,27 +95,27 @@ const mapLegacyColorStates: Record<
   // Primary button
   primary: {
     background: {
-      default: hexToRgba(IOColors.blue, 0),
-      pressed: hexToRgba(IOColors.blue, 0.15),
+      default: hexToRgba(IOColors["blue-500"], 0),
+      pressed: hexToRgba(IOColors["blue-500"], 0.15),
       disabled: "transparent"
     },
     icon: {
-      default: IOColors.blue,
-      pressed: IOColors.blue,
-      disabled: hexToRgba(IOColors.blue, 0.25)
+      default: IOColors["blue-500"],
+      pressed: IOColors["blue-500"],
+      disabled: hexToRgba(IOColors["blue-500"], 0.25)
     }
   },
   // Neutral button
   neutral: {
     background: {
       default: IOColors.white,
-      pressed: IOColors.greyUltraLight,
+      pressed: IOColors["grey-50"],
       disabled: "transparent"
     },
     icon: {
-      default: IOColors.bluegrey,
+      default: IOColors["grey-700"],
       pressed: IOColors.black,
-      disabled: IOColors.grey
+      disabled: IOColors["grey-450"]
     }
   },
   // Contrast button

package/src/components/buttons/IconButtonSolid.tsx

@@ -8,7 +8,8 @@ import Animated, {
 import {
   IOButtonStyles,
   IOIconButtonStyles,
-  useIOExperimentalDesign
+  useIOExperimentalDesign,
+  useIOTheme
 } from "../../core";
 import { IOColors, hexToRgba } from "../../core/IOColors";
 import { useScaleAnimation } from "../../hooks";
@@ -36,35 +37,6 @@ type ColorStates = {
   };
 };
 
-const mapColorStates: Record<
-  NonNullable<IconButtonSolid["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    background: {
-      default: IOColors["blueIO-500"],
-      pressed: IOColors["blueIO-600"],
-      disabled: IOColors["grey-100"]
-    },
-    icon: {
-      default: IOColors.white,
-      disabled: IOColors["grey-450"]
-    }
-  },
-  contrast: {
-    background: {
-      default: IOColors.white,
-      pressed: IOColors["blueIO-50"],
-      disabled: hexToRgba(IOColors.white, 0.25)
-    },
-    icon: {
-      default: IOColors["blueIO-500"],
-      disabled: IOColors["blueIO-500"]
-    }
-  }
-};
-
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const mapLegacyColorStates: Record<
   NonNullable<IconButtonSolid["color"]>,
@@ -73,7 +45,7 @@ const mapLegacyColorStates: Record<
   // Primary button
   primary: {
     background: {
-      default: IOColors.blue,
+      default: IOColors["blue-500"],
       pressed: IOColors["blue-600"],
       disabled: IOColors["grey-100"]
     },
@@ -89,8 +61,8 @@ const mapLegacyColorStates: Record<
       disabled: hexToRgba(IOColors.white, 0.25)
     },
     icon: {
-      default: IOColors.blue,
-      disabled: IOColors.blue
+      default: IOColors["blue-500"],
+      disabled: IOColors["blue-500"]
     }
   }
 };
@@ -104,15 +76,47 @@ export const IconButtonSolid = ({
   accessibilityHint,
   testID
 }: IconButtonSolid) => {
+  const theme = useIOTheme();
   const { isExperimental } = useIOExperimentalDesign();
 
   const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
     useScaleAnimation("exaggerated");
   const reducedMotion = useReducedMotion();
 
+  const mapColorStates = React.useMemo<
+    Record<NonNullable<IconButtonSolid["color"]>, ColorStates>
+  >(
+    () => ({
+      // Primary button
+      primary: {
+        background: {
+          default: IOColors[theme["interactiveElem-default"]],
+          pressed: IOColors[theme["interactiveElem-pressed"]],
+          disabled: IOColors[theme["interactiveElem-disabled"]]
+        },
+        icon: {
+          default: IOColors[theme["buttonText-default"]],
+          disabled: IOColors[theme["buttonText-disabled"]]
+        }
+      },
+      contrast: {
+        background: {
+          default: IOColors.white,
+          pressed: IOColors["blueIO-50"],
+          disabled: hexToRgba(IOColors.white, 0.25)
+        },
+        icon: {
+          default: IOColors["blueIO-500"],
+          disabled: IOColors["blueIO-500"]
+        }
+      }
+    }),
+    [theme]
+  );
+
   const colorMap = React.useMemo(
     () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-    [isExperimental]
+    [isExperimental, mapColorStates]
   );
 
   const backgroundColorAnimationStyle = useAnimatedStyle(() => ({

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -176,7 +176,7 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
         },
         false,
         {
-          "backgroundColor": "rgba(231,236,252,0)",
+          "backgroundColor": "rgba(9,50,182,0)",
           "borderColor": "#0B3EE3",
         },
         {
@@ -282,15 +282,14 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
           "textAlignVertical": "center",
         },
         {
+          "backgroundColor": "#0B3EE3",
           "overflow": "hidden",
         },
         false,
         {
           "height": 48,
         },
-        {
-          "backgroundColor": "#0B3EE3",
-        },
+        {},
         {
           "transform": [
             {
@@ -1024,15 +1023,14 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
           "textAlignVertical": "center",
         },
         {
+          "backgroundColor": "#0073E6",
           "overflow": "hidden",
         },
         false,
         {
           "height": 40,
         },
-        {
-          "backgroundColor": "#0073E6",
-        },
+        {},
         {
           "transform": [
             {

package/src/components/icons/Icon.tsx

@@ -427,7 +427,7 @@ change its color values. It accepts `IOColors` values only.
 */
 export const Icon = ({
   name,
-  color = "bluegrey",
+  color = "grey-700",
   size = 24,
   accessible = false,
   accessibilityLabel = "",
@@ -471,7 +471,7 @@ type IOAnimatedIconsProps = {
 
 export const AnimatedIcon = ({
   name,
-  color = IOColors.bluegrey,
+  color = IOColors["grey-700"],
   size = 24,
   accessible = false,
   allowFontScaling = false,

package/src/components/icons/README.md

@@ -105,7 +105,7 @@ export const IONavIcons = {
 You can add the recently added icon with the following declaration:
 ```jsx
 // Default size: 24×24px
-// Default color: Bluegrey
+// Default color: Grey-700
 <Icon name="spid">
 ```
 

package/src/components/icons/svg/IconProductIOAppBlueBg.tsx

@@ -1,21 +1,20 @@
 import React from "react";
-import { Svg, Path, G, Mask, Rect } from "react-native-svg";
+import { Path, Svg } from "react-native-svg";
+import { IOColors } from "../../../core";
 import { SVGIconProps } from "../types";
 
 const IconProductIOAppBlueBg = ({ size, style, ...props }: SVGIconProps) => (
   <Svg width={size} height={size} viewBox="0 0 24 24" style={style} {...props}>
-    <Rect width={size} height={size} fill="#0B3EE3" rx="4" />
-    <Mask id="a" width={size} height={size} x="6" y="7">
-      <Path
-        fill="#fff"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.25 7c.69036 0 1.25.55964 1.25 1.25S7.94036 9.5 7.25 9.5 6 8.94036 6 8.25 6.55964 7 7.25 7Zm10.5 6c0 2.2091-1.7909 4-3.8095 4-2.3996 0-4.1905-1.7909-4.1905-4 0-2.2091 1.7909-4 4.1905-4 2.0186 0 3.8095 1.7909 3.8095 4Zm-9.5-1.25c0-.5523-.44772-1-1-1s-1 .4477-1 1V16c0 .5523.44772 1 1 1s1-.4477 1-1v-4.25Zm6.4826.8302h.5326v-.524h-.5287v-.6337h-.5785v2.1082c0 .3331.0459.5606.1417.6824.092.1259.2682.1869.5287.1869.0996 0 .249-.0244.4406-.0691l-.0268-.4874-.3295.0081c-.0575 0-.0996-.0122-.1264-.0406-.0268-.0285-.0422-.061-.046-.0975-.0038-.0406-.0077-.1016-.0077-.195v-.9383Zm-1.7431-.52v2.287h.5785v-2.287h-.5785Zm-.8683-.0568c.1011 0 .1867.034.2528.1021.0661.0681.0972.1514.0972.2536 0 .1021-.0311.1816-.0972.2497-.0623.0605-.1439.0946-.2489.0946-.1011 0-.1867-.0341-.2528-.1022-.0661-.0681-.1011-.1513-.1011-.2497 0-.0984.035-.1816.0972-.2497.0661-.0682.1517-.0984.2528-.0984Z"
-      />
-    </Mask>
-    <G mask="url(#a)">
-      <Path fill="#fff" d="M-13-13h50v50h-50z" />
-    </G>
+    <Path
+      d="M0 9.6c0-3.36 0-5.04.654-6.324A6 6 0 0 1 3.276.654C4.56 0 6.24 0 9.6 0h4.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C24 4.56 24 6.24 24 9.6v4.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C19.44 24 17.76 24 14.4 24H9.6c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C0 19.44 0 17.76 0 14.4V9.6Z"
+      fill={IOColors["blueIO-500"]}
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.21 6.4a1.35 1.35 0 1 1 0 2.7 1.35 1.35 0 0 1 0-2.7Zm11.34 6.48c0 2.386-1.934 4.32-4.114 4.32-2.592 0-4.526-1.934-4.526-4.32s1.934-4.32 4.526-4.32c2.18 0 4.114 1.934 4.114 4.32ZM8.29 11.53a1.08 1.08 0 1 0-2.16 0v4.59a1.08 1.08 0 0 0 2.16 0v-4.59Zm7.001.897h.576v-.566h-.571v-.685h-.625v2.277c0 .36.05.606.153.737.1.136.29.202.57.202.108 0 .27-.026.477-.075l-.03-.526-.355.009c-.062 0-.108-.013-.137-.044a.177.177 0 0 1-.05-.105 2.24 2.24 0 0 1-.008-.211v-1.013Zm-1.882-.562v2.47h.624v-2.47h-.624Zm-.938-.062a.366.366 0 0 1 .378.385c0 .11-.034.196-.105.27a.37.37 0 0 1-.269.101.375.375 0 0 1-.382-.38c0-.106.038-.196.105-.27a.363.363 0 0 1 .273-.106Z"
+      fill={IOColors.white}
+    />
   </Svg>
 );
 

package/src/components/icons/svg/originals/IconProductIOAppBlueBg.svg

@@ -1,9 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-  <rect width="24" height="24" fill="#0B3EE3" rx="4"/>
-  <mask id="a" width="12" height="10" x="6" y="7" maskUnits="userSpaceOnUse" style="mask-type:luminance">
-    <path fill="#fff" fill-rule="evenodd" d="M7.25 7c.69036 0 1.25.55964 1.25 1.25S7.94036 9.5 7.25 9.5 6 8.94036 6 8.25 6.55964 7 7.25 7Zm10.5 6c0 2.2091-1.7909 4-3.8095 4-2.3996 0-4.1905-1.7909-4.1905-4 0-2.2091 1.7909-4 4.1905-4 2.0186 0 3.8095 1.7909 3.8095 4Zm-9.5-1.25c0-.5523-.44772-1-1-1s-1 .4477-1 1V16c0 .5523.44772 1 1 1s1-.4477 1-1v-4.25Zm6.4826.8302h.5326v-.524h-.5287v-.6337h-.5785v2.1082c0 .3331.0459.5606.1417.6824.092.1259.2682.1869.5287.1869.0996 0 .249-.0244.4406-.0691l-.0268-.4874-.3295.0081c-.0575 0-.0996-.0122-.1264-.0406-.0268-.0285-.0422-.061-.046-.0975-.0038-.0406-.0077-.1016-.0077-.195v-.9383Zm-1.7431-.52v2.287h.5785v-2.287h-.5785Zm-.8683-.0568c.1011 0 .1867.034.2528.1021.0661.0681.0972.1514.0972.2536 0 .1021-.0311.1816-.0972.2497-.0623.0605-.1439.0946-.2489.0946-.1011 0-.1867-.0341-.2528-.1022-.0661-.0681-.1011-.1513-.1011-.2497 0-.0984.035-.1816.0972-.2497.0661-.0682.1517-.0984.2528-.0984Z" clip-rule="evenodd"/>
-  </mask>
-  <g mask="url(#a)">
-    <path fill="#fff" d="M-13-13h50v50h-50z"/>
-  </g>
-</svg>
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+        d="M0 9.6c0-3.36 0-5.04.654-6.324A6 6 0 0 1 3.276.654C4.56 0 6.24 0 9.6 0h4.8c3.36 0 5.04 0 6.324.654a6 6 0 0 1 2.622 2.622C24 4.56 24 6.24 24 9.6v4.8c0 3.36 0 5.04-.654 6.324a6 6 0 0 1-2.622 2.622C19.44 24 17.76 24 14.4 24H9.6c-3.36 0-5.04 0-6.324-.654a6 6 0 0 1-2.622-2.622C0 19.44 0 17.76 0 14.4V9.6Z"
+        fill="#0B3EE3"
+    />
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.21 6.4a1.35 1.35 0 1 1 0 2.7 1.35 1.35 0 0 1 0-2.7Zm11.34 6.48c0 2.386-1.934 4.32-4.114 4.32-2.592 0-4.526-1.934-4.526-4.32s1.934-4.32 4.526-4.32c2.18 0 4.114 1.934 4.114 4.32ZM8.29 11.53a1.08 1.08 0 1 0-2.16 0v4.59a1.08 1.08 0 0 0 2.16 0v-4.59Zm7.001.897h.576v-.566h-.571v-.685h-.625v2.277c0 .36.05.606.153.737.1.136.29.202.57.202.108 0 .27-.026.477-.075l-.03-.526-.355.009c-.062 0-.108-.013-.137-.044a.177.177 0 0 1-.05-.105 2.24 2.24 0 0 1-.008-.211v-1.013Zm-1.882-.562v2.47h.624v-2.47h-.624Zm-.938-.062a.366.366 0 0 1 .378.385c0 .11-.034.196-.105.27a.37.37 0 0 1-.269.101.375.375 0 0 1-.382-.38c0-.106.038-.196.105-.27a.363.363 0 0 1 .273-.106Z"
+        fill="#fff"
+    />
+</svg>

package/src/components/layout/HeaderFirstLevel.tsx

@@ -28,8 +28,8 @@ import { HeaderActionProps } from "./common";
 
 export type HeaderFirstLevel = WithTestID<{
   title: string;
-  firstAction: HeaderActionProps;
-  secondAction: HeaderActionProps;
+  firstAction?: HeaderActionProps;
+  secondAction?: HeaderActionProps;
   thirdAction?: HeaderActionProps;
   animatedRef?: AnimatedRef<Animated.ScrollView>;
   animatedFlatListRef?: AnimatedRef<Animated.FlatList<any>>;
@@ -134,8 +134,8 @@ export const HeaderFirstLevel = ({
         </View>
         <HStack space={16} style={{ flexShrink: 0 }}>
           {thirdAction && <IconButton {...thirdAction} color={"primary"} />}
-          <IconButton {...secondAction} color={"primary"} />
-          <IconButton {...firstAction} color={"primary"} />
+          {secondAction && <IconButton {...secondAction} color={"primary"} />}
+          {firstAction && <IconButton {...firstAction} color={"primary"} />}
         </HStack>
       </View>
     </Animated.View>

package/src/components/listitems/ListItemInfo.tsx

@@ -154,7 +154,7 @@ export const ListItemInfo = ({
         <Icon
           allowFontScaling
           name={icon}
-          color="grey-450"
+          color={theme["icon-decorative"]}
           size={IOListItemVisualParams.iconSize}
         />
       )}

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -106,7 +106,7 @@ export const ListItemInfoCopy = ({
             <Icon
               allowFontScaling
               name={icon}
-              color="grey-450"
+              color={theme["icon-decorative"]}
               size={IOListItemVisualParams.iconSize}
             />
           )}

package/src/components/listitems/ListItemNav.tsx

@@ -81,7 +81,7 @@ export const ListItemNav = ({
   description,
   onPress,
   icon,
-  iconColor = "grey-450",
+  iconColor,
   avatarProps: avatar,
   paymentLogoUri,
   accessibilityLabel,
@@ -96,6 +96,9 @@ export const ListItemNav = ({
     useListItemAnimation();
   const theme = useIOTheme();
 
+  const defaultIconColor = iconColor ?? theme["icon-decorative"];
+  const interactiveColor = theme["interactiveElem-default"];
+
   const { dynamicFontScale, hugeFontEnabled } = useIOFontDynamicScale();
 
   const listItemNavContent = (
@@ -151,8 +154,6 @@ export const ListItemNav = ({
     </>
   );
 
-  const interactiveColor = theme["interactiveElem-default"];
-
   const handleOnPress = (event: GestureResponderEvent) => {
     if (!loading) {
       onPress(event);
@@ -188,7 +189,7 @@ export const ListItemNav = ({
               <Icon
                 allowFontScaling
                 name={icon}
-                color={iconColor}
+                color={defaultIconColor}
                 size={IOListItemVisualParams.iconSize}
               />
               <HSpacer

package/src/components/listitems/ListItemNavAlert.tsx

@@ -71,7 +71,9 @@ export const ListItemNavAlert = ({
     </>
   );
 
-  const iconColor = isExperimental ? theme["interactiveElem-default"] : "blue";
+  const iconColor = isExperimental
+    ? theme["interactiveElem-default"]
+    : "blue-500";
 
   return (
     <Pressable

package/src/components/listitems/ListItemTransaction.tsx

@@ -123,7 +123,7 @@ export const ListItemTransaction = ({
 
   const interactiveColor: IOColors = isExperimental
     ? theme["interactiveElem-default"]
-    : "blue";
+    : "blue-500";
 
   const amountColorDefault: IOColors = theme["textBody-default"];
   const amountColorRefund: IOColors = theme.successText;

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

@@ -2800,7 +2800,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                   "width": 24,
                 },
                 {
-                  "borderColor": "#475A6D",
+                  "borderColor": "#555C70",
                 },
               ]
             }
@@ -3085,7 +3085,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
                   "width": 24,
                 },
                 {
-                  "borderColor": "#475A6D",
+                  "borderColor": "#555C70",
                 },
               ]
             }

package/src/components/numberpad/NumberButton.tsx

@@ -56,7 +56,7 @@ const legacyColorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
   light: {
     background: IOColors["grey-100"],
     pressed: IOColors["grey-200"],
-    foreground: "blue"
+    foreground: "blue-500"
   },
   dark: {
     background: hexToRgba(IOColors.black, 0.1),

package/src/components/pictograms/Pictogram.tsx

@@ -12,7 +12,6 @@ import PictogramCameraDenied from "./svg/PictogramCameraDenied";
 import PictogramCameraRequest from "./svg/PictogramCameraRequest";
 import PictogramCharity from "./svg/PictogramCharity";
 import PictogramCie from "./svg/PictogramCie";
-import PictogramCompleted from "./svg/PictogramCompleted";
 import PictogramComunicationProblem from "./svg/PictogramComunicationProblem";
 import PictogramEmpty from "./svg/PictogramEmpty";
 import PictogramEmptyArchive from "./svg/PictogramEmptyArchive";
@@ -36,7 +35,6 @@ import PictogramObjManual from "./svg/PictogramObjManual";
 import PictogramObjTrash from "./svg/PictogramObjTrash";
 import PictogramPasscode from "./svg/PictogramPasscode";
 import PictogramPayments from "./svg/PictogramPayments";
-import PictogramProcessing from "./svg/PictogramProcessing";
 import PictogramSecurity from "./svg/PictogramSecurity";
 import PictogramStopSecurity from "./svg/PictogramStopSecurity";
 import PictogramSuccess from "./svg/PictogramSuccess";
@@ -117,10 +115,6 @@ import PictogramWalletDoc from "./svg/PictogramWalletDoc";
 import { SVGPictogramProps } from "./types";
 
 export const IOPictograms = {
-  // Start legacy pictograms //
-  processing: PictogramProcessing,
-  completed: PictogramCompleted,
-  // End legacy pictograms
   empty: PictogramEmpty,
   feature: PictogramFeature,
   charity: PictogramCharity,
@@ -197,7 +191,6 @@ export type IOPictogramSizeScale = 48 | 64 | 72 | 80 | 120 | 180;
 
 type IOPictogramsProps = {
   name: IOPictograms;
-  color?: IOColors;
   /* Not too happy about the API choice,
   but at least we have the same <StatusBar …>
   component props. */
@@ -215,7 +208,6 @@ type PictogramPalette = {
 
 export const Pictogram = ({
   name,
-  color = "aqua",
   pictogramStyle = "default",
   size = 120,
   allowFontScaling = false,
@@ -256,7 +248,6 @@ export const Pictogram = ({
     <PictogramElement
       {...props}
       size={pictogramSize}
-      color={IOColors[color]}
       colorValues={colorValues}
     />
   );
@@ -365,7 +356,6 @@ export const IOPictogramsBleed: {
 
 export const PictogramBleed = ({
   name,
-  color = "aqua",
   size = 80,
   pictogramStyle = "default",
   allowFontScaling = false,
@@ -406,7 +396,6 @@ export const PictogramBleed = ({
     <PictogramElement
       {...props}
       size={pictogramSize}
-      color={IOColors[color]}
       colorValues={colorValues}
     />
   );
@@ -428,14 +417,3 @@ export const IOPictogramsObject = {
 } as const;
 
 export type IOPictogramsObject = keyof typeof IOPictogramsObject;
-
-/* Legacy pictograms */
-
-const { processing, completed } = IOPictograms;
-
-export const IOPictogramsLegacy = {
-  processing,
-  completed
-} as const;
-
-export type IOPictogramsLegacy = keyof typeof IOPictogramsLegacy;

package/src/components/pictograms/types.ts

@@ -2,6 +2,5 @@ import { ColorValue } from "react-native";
 
 export type SVGPictogramProps = {
   size: number | "100%";
-  color: ColorValue;
   colorValues: Record<string, ColorValue>;
 };

package/src/components/spacer/Spacer.tsx

@@ -18,7 +18,7 @@ const DEFAULT_SIZE: IOSpacer = 16;
 
 /* Debug Mode */
 const debugMode = false;
-const debugBg = hexToRgba(IOColors.red, 0.2);
+const debugBg = hexToRgba(IOColors["error-600"], 0.2);
 
 /**
 Native `Spacer` component

package/src/components/stepper/Stepper.tsx

@@ -21,7 +21,7 @@ const colorMap: Record<string, IOColors> = {
 };
 
 const legacyColorMap: Record<string, IOColors> = {
-  active: "blue"
+  active: "blue-500"
 };
 
 export const Stepper = ({ steps, currentStep }: StepperProps) => {

package/src/components/switch/NativeSwitch.tsx

@@ -18,7 +18,7 @@ type OwnProps = Pick<
 
 // 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;
+  Platform.OS === "android" ? IOColors["grey-300"] : IOColors["grey-50"];
 
 export const NativeSwitch = ({
   onValueChange,
@@ -34,7 +34,7 @@ export const NativeSwitch = ({
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   const legacyTrackColor = {
     false: bgLegacyTrackColorAndroid,
-    true: IOColors.blue
+    true: IOColors["blue-500"]
   };
 
   const trackColorComponent = isExperimental ? trackColor : legacyTrackColor;

package/src/components/tabs/TabItem.tsx

@@ -100,17 +100,17 @@ const mapLegacyColorStates: Record<
   light: {
     border: {
       default: IOColors["grey-300"],
-      selected: IOColors.blue,
+      selected: IOColors["blue-500"],
       disabled: hexToRgba(IOColors.white)
     },
     background: {
       default: IOColors.white,
-      selected: hexToRgba(IOColors.blue, 0.1),
+      selected: hexToRgba(IOColors["blue-500"], 0.1),
       pressed: IOColors.white
     },
     foreground: {
       default: "black",
-      selected: "blue",
+      selected: "blue-500",
       disabled: "grey-700"
     }
   },

package/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap

@@ -103,7 +103,7 @@ exports[`Test Typography Components BodySmall Snapshot 3`] = `
     [
       {},
       {
-        "color": "#475A6D",
+        "color": "#555C70",
         "fontFamily": "Titillium Sans Pro",
         "fontSize": 14,
         "fontStyle": "normal",
@@ -126,7 +126,7 @@ exports[`Test Typography Components BodySmall Snapshot 4`] = `
     [
       {},
       {
-        "color": "#C02927",
+        "color": "#D13333",
         "fontFamily": "Titillium Sans Pro",
         "fontSize": 14,
         "fontStyle": "normal",
@@ -286,7 +286,7 @@ exports[`Test Typography Components H3 Snapshot 2`] = `
     [
       {},
       {
-        "color": "#CCD4DC",
+        "color": "#D2D6E3",
         "fontFamily": "Titillium Sans Pro",
         "fontSize": 22,
         "fontStyle": "normal",
@@ -476,7 +476,7 @@ exports[`Test Typography Components H5 Snapshot 2`] = `
         "textTransform": "uppercase",
       },
       {
-        "color": "#475A6D",
+        "color": "#555C70",
         "fontFamily": "Titillium Sans Pro",
         "fontSize": 14,
         "fontStyle": "normal",