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

package/src/components/buttons/ButtonSolid.tsx

@@ -1,8 +1,15 @@
-import React, { ComponentProps, useCallback, useEffect, useRef } from "react";
+import React, {
+  ComponentProps,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef
+} from "react";
 import {
+  ColorValue,
   GestureResponderEvent,
   Pressable,
-  StyleSheet,
   View
 } from "react-native";
 import ReactNativeHapticFeedback from "react-native-haptic-feedback";
@@ -18,7 +25,8 @@ import {
   enterTransitionInnerContent,
   enterTransitionInnerContentSmall,
   exitTransitionInnerContent,
-  useIOExperimentalDesign
+  useIOExperimentalDesign,
+  useIOTheme
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -29,37 +37,23 @@ import { ButtonText } from "../typography/ButtonText";
 export type ButtonSolidColor = "primary" | "danger" | "contrast";
 
 type ColorStates = {
-  default: string;
-  pressed: string;
-  label: {
+  background: {
+    default: string;
+    pressed: string;
+    disabled: string;
+  };
+  foreground: {
     default: IOColors;
     disabled: IOColors;
   };
 };
 
-// Disabled state
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const colorPrimaryLegacyButtonDisabled: IOColors = "grey-200";
-const legacyStyles = StyleSheet.create({
-  backgroundDisabled: {
-    backgroundColor: IOColors[colorPrimaryLegacyButtonDisabled]
-  }
-});
-
-const colorPrimaryButtonDisabled: IOColors = "grey-200";
 const ICON_MARGIN = 8;
 const DISABLED_OPACITY = 0.5;
 
 // Icon size
 const iconSize: IOIconSizeScale = 20;
 
-const styles = StyleSheet.create({
-  backgroundDisabled: {
-    backgroundColor: IOColors[colorPrimaryButtonDisabled],
-    opacity: DISABLED_OPACITY
-  }
-});
-
 export type ButtonSolidProps = WithTestID<
   {
     /**
@@ -87,39 +81,6 @@ export type ButtonSolidProps = WithTestID<
   >
 >;
 
-const mapColorStates: Record<
-  NonNullable<ButtonSolidProps["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    default: IOColors["blueIO-500"],
-    pressed: IOColors["blueIO-600"],
-    label: {
-      default: "white",
-      disabled: "grey-700"
-    }
-  },
-  // Danger button
-  danger: {
-    default: IOColors["error-600"],
-    pressed: IOColors["error-500"],
-    label: {
-      default: "white",
-      disabled: "grey-700"
-    }
-  },
-  // Contrast button
-  contrast: {
-    default: IOColors.white,
-    pressed: IOColors["blueIO-50"],
-    label: {
-      default: "blueIO-500",
-      disabled: "grey-700"
-    }
-  }
-};
-
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const mapLegacyColorStates: Record<
   NonNullable<ButtonSolidProps["color"]>,
@@ -127,34 +88,43 @@ const mapLegacyColorStates: Record<
 > = {
   // Primary button
   primary: {
-    default: IOColors["blue-500"],
-    pressed: IOColors["blue-600"],
-    label: {
+    background: {
+      default: IOColors["blue-500"],
+      pressed: IOColors["blue-600"],
+      disabled: IOColors["grey-200"]
+    },
+    foreground: {
       default: "white",
       disabled: "white"
     }
   },
   // Danger button
   danger: {
-    default: IOColors["error-600"],
-    pressed: IOColors["error-500"],
-    label: {
+    background: {
+      default: IOColors["error-600"],
+      pressed: IOColors["error-500"],
+      disabled: IOColors["grey-200"]
+    },
+    foreground: {
       default: "white",
       disabled: "white"
     }
   },
   // Contrast button
   contrast: {
-    default: IOColors.white,
-    pressed: IOColors["blue-50"],
-    label: {
+    background: {
+      default: IOColors.white,
+      pressed: IOColors["blue-50"],
+      disabled: IOColors["grey-200"]
+    },
+    foreground: {
       default: "blue-500",
       disabled: "white"
     }
   }
 };
 
-export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
+export const ButtonSolid = forwardRef<View, ButtonSolidProps>(
   (
     {
       color = "primary",
@@ -171,17 +141,62 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
     },
     ref
   ) => {
+    const theme = useIOTheme();
     const { isExperimental } = useIOExperimentalDesign();
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation();
     const reducedMotion = useReducedMotion();
 
-    const colorMap = React.useMemo(
+    const mapColorStates = useMemo<
+      Record<NonNullable<ButtonSolidProps["color"]>, ColorStates>
+    >(
+      () => ({
+        // Primary button
+        primary: {
+          background: {
+            default: IOColors[theme["interactiveElem-default"]],
+            pressed: IOColors[theme["interactiveElem-pressed"]],
+            disabled: IOColors[theme["interactiveElem-disabled"]]
+          },
+          foreground: {
+            default: theme["buttonText-default"],
+            disabled: theme["buttonText-disabled"]
+          }
+        },
+        // Danger button
+        danger: {
+          background: {
+            default: IOColors["error-600"],
+            pressed: IOColors["error-500"],
+            disabled: IOColors[theme["interactiveElem-disabled"]]
+          },
+          foreground: {
+            default: theme["buttonText-default"],
+            disabled: theme["buttonText-disabled"]
+          }
+        },
+        // Contrast button
+        contrast: {
+          background: {
+            default: IOColors.white,
+            pressed: IOColors["blueIO-50"],
+            disabled: IOColors["blueIO-50"]
+          },
+          foreground: {
+            default: "blueIO-500",
+            disabled: "blueIO-500"
+          }
+        }
+      }),
+      [theme]
+    );
+
+    const colorMap = useMemo(
       () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-      [isExperimental]
+      [isExperimental, mapColorStates]
     );
 
-    const buttonStyles = React.useMemo(
+    const buttonStyles = useMemo(
       () => (isExperimental ? IOButtonStyles : IOButtonLegacyStyles),
       [isExperimental]
     );
@@ -203,7 +218,7 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
       const backgroundColor = interpolateColor(
         progress.value,
         [0, 1],
-        [colorMap[color].default, colorMap[color].pressed]
+        [colorMap[color].background.default, colorMap[color].background.pressed]
       );
 
       return { backgroundColor };
@@ -222,10 +237,15 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
       [loading, onPress]
     );
 
+    // Background
+    const backgroundColor: ColorValue = disabled
+      ? colorMap[color]?.background?.disabled
+      : colorMap[color]?.background?.default;
+
     // Label & Icons colors
     const foregroundColor: IOColors = disabled
-      ? colorMap[color]?.label?.disabled
-      : colorMap[color]?.label?.default;
+      ? colorMap[color]?.foreground?.disabled
+      : colorMap[color]?.foreground?.default;
 
     return (
       <Pressable
@@ -249,14 +269,10 @@ export const ButtonSolid = React.forwardRef<View, ButtonSolidProps>(
         <Animated.View
           style={[
             buttonStyles.button,
-            { overflow: "hidden" },
+            { backgroundColor, overflow: "hidden" },
             isExperimental && fullWidth && { paddingHorizontal: 16 },
             buttonStyles.buttonSizeDefault,
-            disabled
-              ? isExperimental
-                ? styles.backgroundDisabled
-                : legacyStyles.backgroundDisabled
-              : { backgroundColor: colorMap[color]?.default },
+            disabled ? { opacity: DISABLED_OPACITY } : {},
             /* Prevent Reanimated from overriding background colors
               if button is disabled */
             !disabled && !reducedMotion && scaleAnimatedStyle,

package/src/components/buttons/IconButton.tsx

@@ -10,7 +10,8 @@ import {
   IOIconButtonStyles,
   IOStyles,
   hexToRgba,
-  useIOExperimentalDesign
+  useIOExperimentalDesign,
+  useIOTheme
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -70,33 +71,6 @@ const mapLegacyColorStates: Record<
   }
 };
 
-const mapColorStates: Record<NonNullable<IconButton["color"]>, ColorStates> = {
-  // Primary button
-  primary: {
-    icon: {
-      default: IOColors["blueIO-500"],
-      pressed: IOColors["blueIO-600"],
-      disabled: hexToRgba(IOColors["blueIO-500"], 0.25)
-    }
-  },
-  // Neutral button
-  neutral: {
-    icon: {
-      default: IOColors.black,
-      pressed: IOColors["grey-850"],
-      disabled: IOColors["grey-450"]
-    }
-  },
-  // Contrast button
-  contrast: {
-    icon: {
-      default: IOColors.white,
-      pressed: hexToRgba(IOColors.white, 0.85),
-      disabled: hexToRgba(IOColors.white, 0.25)
-    }
-  }
-};
-
 const AnimatedIconClassComponent =
   Animated.createAnimatedComponent(IconClassComponent);
 
@@ -110,15 +84,48 @@ export const IconButton = ({
   accessibilityHint,
   testID
 }: IconButton) => {
+  const theme = useIOTheme();
   const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
     useScaleAnimation("exaggerated");
   const reducedMotion = useReducedMotion();
 
   const { isExperimental } = useIOExperimentalDesign();
 
+  const mapColorStates = useMemo<
+    Record<NonNullable<IconButton["color"]>, ColorStates>
+  >(
+    () => ({
+      // Primary button
+      primary: {
+        icon: {
+          default: IOColors[theme["interactiveElem-default"]],
+          pressed: IOColors[theme["interactiveElem-pressed"]],
+          disabled: IOColors[theme["interactiveElem-disabled"]]
+        }
+      },
+      // Neutral button
+      neutral: {
+        icon: {
+          default: IOColors[theme["neutralButton-default"]],
+          pressed: IOColors[theme["neutralButton-pressed"]],
+          disabled: IOColors[theme["neutralButton-disabled"]]
+        }
+      },
+      // Contrast button
+      contrast: {
+        icon: {
+          default: IOColors.white,
+          pressed: hexToRgba(IOColors.white, 0.85),
+          disabled: hexToRgba(IOColors.white, 0.25)
+        }
+      }
+    }),
+    [theme]
+  );
+
   const colorMap = useMemo(
     () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-    [isExperimental]
+    [isExperimental, mapColorStates]
   );
 
   // Animate the <Icon> color prop

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"]>,
@@ -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/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