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

package/src/components/buttons/IconButton.tsx

@@ -9,8 +9,10 @@ import {
   IOColors,
   IOIconButtonStyles,
   IOStyles,
+  IOThemeLight,
   hexToRgba,
-  useIOExperimentalDesign
+  useIOExperimentalDesign,
+  useIOTheme
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -29,6 +31,7 @@ export type IconButton = WithTestID<{
   accessibilityLabel: string;
   accessibilityHint?: string;
   onPress: (event: GestureResponderEvent) => void;
+  persistentColorMode?: boolean;
 }>;
 
 type ColorStates = {
@@ -70,38 +73,12 @@ 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);
 
 export const IconButton = ({
   color = "primary",
+  persistentColorMode = false,
   icon,
   iconSize = 24,
   disabled = false,
@@ -110,15 +87,54 @@ 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: persistentColorMode
+            ? IOColors[IOThemeLight["neutralButton-default"]]
+            : IOColors[theme["neutralButton-default"]],
+          pressed: persistentColorMode
+            ? IOColors[IOThemeLight["neutralButton-pressed"]]
+            : IOColors[theme["neutralButton-pressed"]],
+          disabled: persistentColorMode
+            ? IOColors[IOThemeLight["neutralButton-disabled"]]
+            : IOColors[theme["neutralButton-disabled"]]
+        }
+      },
+      // Contrast button
+      contrast: {
+        icon: {
+          default: IOColors.white,
+          pressed: hexToRgba(IOColors.white, 0.85),
+          disabled: hexToRgba(IOColors.white, 0.25)
+        }
+      }
+    }),
+    [persistentColorMode, 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/layout/HeaderSecondLevel.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ComponentProps, useEffect, useLayoutEffect } from "react";
+import { createRef, useEffect, useLayoutEffect, useMemo } from "react";
 import {
   AccessibilityInfo,
   ColorValue,
@@ -24,13 +24,14 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   IOColors,
   IOSpringValues,
+  IOThemeDark,
+  IOThemeLight,
   IOVisualCostants,
   alertEdgeToEdgeInsetTransitionConfig,
   hexToRgba,
   iconBtnSizeSmall,
   useIOExperimentalDesign,
-  useIOTheme,
-  useIOThemeContext
+  useIOTheme
 } from "../../core";
 import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing";
 import { WithTestID } from "../../utils/types";
@@ -48,7 +49,7 @@ type ScrollValues = {
 type DiscreteTransitionProps =
   | {
       enableDiscreteTransition: true;
-      animatedRef: AnimatedRef<Animated.ScrollView>;
+      animatedRef: AnimatedRef<Animated.ScrollView | Animated.FlatList<any>>;
     }
   | {
       enableDiscreteTransition?: false;
@@ -139,7 +140,7 @@ export const HeaderSecondLevel = ({
   backTestID,
   title,
   type,
-  variant = "neutral",
+  variant,
   backgroundColor,
   transparent = false,
   ignoreSafeAreaMargin = false,
@@ -151,29 +152,35 @@ export const HeaderSecondLevel = ({
   thirdAction
 }: HeaderSecondLevel) => {
   const scrollOffset = useScrollViewOffset(
-    animatedRef as AnimatedRef<Animated.ScrollView>
+    (animatedRef as AnimatedRef<Animated.ScrollView>) ||
+      (animatedRef as AnimatedRef<Animated.FlatList<any>>)
   );
-  const titleRef = React.createRef<View>();
+
+  const titleRef = createRef<View>();
 
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
-  const { themeType } = useIOThemeContext();
   const insets = useSafeAreaInsets();
-  const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
+  const isTitleAccessible = useMemo(() => !!title.trim(), [title]);
   const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
 
   const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
-  const iconButtonColorDefault: ComponentProps<typeof IconButton>["color"] =
-    themeType === "dark" ? "contrast" : "neutral";
+  // If the variant is not set, set a fallback color
+  const defaultIconColor = variant ?? "neutral";
 
-  const iconButtonColor: ComponentProps<typeof IconButton>["color"] =
-    variant === "contrast" ? "contrast" : iconButtonColorDefault;
+  /* We apply the same logic of `persistentColorMode`
+  to the title color: if variant is set, the color will
+  be persistent, otherwise it will vary depending
+  on the color scheme. */
+  const titleColorVariant =
+    variant === "contrast"
+      ? IOColors[IOThemeDark["textHeading-default"]]
+      : IOColors[IOThemeLight["textHeading-default"]];
 
-  const titleColor: ColorValue =
-    variant === "neutral"
-      ? IOColors[theme["textHeading-default"]]
-      : IOColors.white;
+  const titleColor: ColorValue = variant
+    ? titleColorVariant
+    : IOColors[theme["textHeading-default"]];
 
   /* Visual attributes when there are transitions between states */
   const HEADER_DEFAULT_BG_COLOR: IOColors = theme["appBackground-primary"];
@@ -186,9 +193,7 @@ export const HeaderSecondLevel = ({
     : headerBgColorSolidState;
 
   const borderColorDefault = IOColors[theme["divider-default"]];
-
   const borderColorSolidState = backgroundColor ?? borderColorDefault;
-
   const borderColorTransparentState = hexToRgba(borderColorSolidState, 0);
 
   useLayoutEffect(() => {
@@ -277,7 +282,10 @@ export const HeaderSecondLevel = ({
               android: "backAndroid",
               default: "backiOS"
             })}
-            color={iconButtonColor}
+            color={defaultIconColor}
+            /* If we specify a variant, we probably want to
+              make it persistent in both light and dark modes. */
+            persistentColorMode={!!variant}
             onPress={goBack}
             accessibilityLabel={backAccessibilityLabel}
             testID={backTestID}
@@ -312,13 +320,25 @@ export const HeaderSecondLevel = ({
         </View>
         <HStack allowScaleSpacing space={16} style={{ flexShrink: 0 }}>
           {type === "threeActions" && (
-            <IconButton {...thirdAction} color={iconButtonColor} />
+            <IconButton
+              {...thirdAction}
+              color={defaultIconColor}
+              persistentColorMode={!!variant}
+            />
           )}
           {(type === "twoActions" || type === "threeActions") && (
-            <IconButton {...secondAction} color={iconButtonColor} />
+            <IconButton
+              {...secondAction}
+              color={defaultIconColor}
+              persistentColorMode={!!variant}
+            />
           )}
           {type !== "base" ? (
-            <IconButton {...firstAction} color={iconButtonColor} />
+            <IconButton
+              {...firstAction}
+              color={defaultIconColor}
+              persistentColorMode={!!variant}
+            />
           ) : (
             <HSpacer size={iconBtnSizeSmall as IOSpacer} />
           )}

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/core/IOColors.ts

@@ -85,7 +85,7 @@ export const IOColors = asIOColors({
   /* Temporary scale based on legacy Blue */
   "blue-600": "#0353A3",
   "blue-500": "#0073E6",
-  "blue-50": "#EFF7FF",
+  "blue-50": "#EFF7FF"
 });
 
 export type IOColors = keyof typeof IOColors;
@@ -206,7 +206,7 @@ export const IOColorsExtra = {
   "blueItalia-600": IOColors["blueItalia-600"],
   "blueItalia-500": IOColors["blueItalia-500"],
   "blueItalia-100": IOColors["blueItalia-100"],
-  "blueItalia-50": IOColors["blueItalia-50"],
+  "blueItalia-50": IOColors["blueItalia-50"]
 };
 
 export type IOColorsExtra = keyof typeof IOColorsExtra;
@@ -223,6 +223,13 @@ const themeKeys = [
   "appBackground-accent",
   "interactiveElem-default",
   "interactiveElem-pressed",
+  "interactiveElem-disabled",
+  "interactiveOutline-disabled",
+  "neutralButton-default",
+  "neutralButton-pressed",
+  "neutralButton-disabled",
+  "buttonText-default",
+  "buttonText-disabled",
   "listItem-pressed",
   // Typography
   "textHeading-default",
@@ -272,6 +279,13 @@ export const IOThemeLight: IOTheme = {
   "appBackground-accent": "blueIO-500",
   "interactiveElem-default": "blueIO-500",
   "interactiveElem-pressed": "blueIO-600",
+  "interactiveElem-disabled": "grey-300",
+  "interactiveOutline-disabled": "grey-650",
+  "neutralButton-default": "black",
+  "neutralButton-pressed": "grey-850",
+  "neutralButton-disabled": "grey-450",
+  "buttonText-default": "white",
+  "buttonText-disabled": "grey-700",
   "listItem-pressed": "grey-50",
   // Typography
   "textHeading-default": "black",
@@ -322,10 +336,17 @@ export const IOThemeDark: IOTheme = {
   "appBackground-secondary": "grey-850",
   "appBackground-tertiary": "grey-700",
   "interactiveElem-default": "blueIO-450",
-  "interactiveElem-pressed": "blueIO-600",
+  "interactiveElem-pressed": "blueIO-500",
+  "interactiveElem-disabled": "grey-700",
+  "interactiveOutline-disabled": "grey-450",
+  "neutralButton-default": "white",
+  "neutralButton-pressed": "grey-100",
+  "neutralButton-disabled": "grey-850",
+  "buttonText-default": "white",
+  "buttonText-disabled": "grey-300",
   "listItem-pressed": "grey-850",
   // Typography
-  "textHeading-default": "grey-200",
+  "textHeading-default": "white",
   "textHeading-secondary": "grey-300",
   "textHeading-tertiary": "grey-450",
   "textBody-default": "white",