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

package/src/components/buttons/ButtonOutline.tsx

@@ -16,7 +16,8 @@ import {
   IOButtonStyles,
   IOColors,
   hexToRgba,
-  useIOExperimentalDesign
+  useIOExperimentalDesign,
+  useIOTheme
 } from "../../core/";
 import { useScaleAnimation } from "../../hooks";
 import { WithTestID } from "../../utils/types";
@@ -28,7 +29,7 @@ import {
 } from "../icons";
 import { IOText, buttonTextFontSize } from "../typography";
 
-type ColorButtonOutline = "primary" | "contrast" | "danger";
+type ColorButtonOutline = "primary" | "contrast";
 export type ButtonOutline = WithTestID<
   {
     color?: ColorButtonOutline;
@@ -46,7 +47,7 @@ export type ButtonOutline = WithTestID<
 >;
 
 type ColorStates = {
-  border: {
+  foreground: {
     default: string;
     pressed: string;
     disabled: string;
@@ -56,71 +57,6 @@ type ColorStates = {
     pressed: string;
     disabled: string;
   };
-  label: {
-    default: string;
-    pressed: string;
-    disabled: string;
-  };
-};
-
-const mapColorStates: Record<
-  NonNullable<ButtonOutline["color"]>,
-  ColorStates
-> = {
-  // Primary button
-  primary: {
-    border: {
-      default: IOColors["blueIO-500"],
-      pressed: IOColors["blueIO-600"],
-      disabled: IOColors["grey-200"]
-    },
-    background: {
-      default: hexToRgba(IOColors["blueIO-50"], 0),
-      pressed: hexToRgba(IOColors["blueIO-50"], 1),
-      disabled: "transparent"
-    },
-    label: {
-      default: IOColors["blueIO-500"],
-      pressed: IOColors["blueIO-600"],
-      disabled: IOColors["grey-700"]
-    }
-  },
-  // Contrast button
-  contrast: {
-    border: {
-      default: IOColors.white,
-      pressed: IOColors.white,
-      disabled: IOColors["blueIO-200"]
-    },
-    background: {
-      default: hexToRgba(IOColors["blueIO-600"], 0),
-      pressed: IOColors["blueIO-600"],
-      disabled: "transparent"
-    },
-    label: {
-      default: IOColors.white,
-      pressed: IOColors.white,
-      disabled: IOColors["blueIO-200"]
-    }
-  },
-  // Danger button
-  danger: {
-    border: {
-      default: IOColors.red,
-      pressed: IOColors.red,
-      disabled: IOColors.bluegreyLight
-    },
-    background: {
-      default: hexToRgba(IOColors.red, 0),
-      pressed: hexToRgba(IOColors.red, 0.15),
-      disabled: "transparent"
-    },
-    label: {
-      default: IOColors.red,
-      pressed: IOColors.red,
-      disabled: IOColors.grey
-    }
-  }
 };
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
@@ -130,25 +66,20 @@ const mapLegacyColorStates: Record<
 > = {
   // Primary button
   primary: {
-    border: {
-      default: IOColors.blue,
-      pressed: IOColors.blue,
-      disabled: IOColors.bluegreyLight
+    foreground: {
+      default: IOColors["blue-500"],
+      pressed: IOColors["blue-500"],
+      disabled: IOColors["grey-450"]
     },
     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"
-    },
-    label: {
-      default: IOColors.blue,
-      pressed: IOColors.blue,
-      disabled: IOColors.grey
     }
   },
   // Contrast button
   contrast: {
-    border: {
+    foreground: {
       default: IOColors.white,
       pressed: IOColors.white,
       disabled: hexToRgba(IOColors.white, 0.5)
@@ -157,29 +88,6 @@ const mapLegacyColorStates: Record<
       default: hexToRgba(IOColors.white, 0),
       pressed: hexToRgba(IOColors.white, 0.2),
       disabled: "transparent"
-    },
-    label: {
-      default: IOColors.white,
-      pressed: IOColors.white,
-      disabled: hexToRgba(IOColors.white, 0.5)
-    }
-  },
-  // Danger button
-  danger: {
-    border: {
-      default: IOColors.red,
-      pressed: IOColors.red,
-      disabled: IOColors.bluegreyLight
-    },
-    background: {
-      default: hexToRgba(IOColors.red, 0),
-      pressed: hexToRgba(IOColors.red, 0.15),
-      disabled: "transparent"
-    },
-    label: {
-      default: IOColors.red,
-      pressed: IOColors.red,
-      disabled: IOColors.grey
     }
   }
 };
@@ -219,6 +127,7 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
     },
     ref
   ) => {
+    const theme = useIOTheme();
     const { isExperimental } = useIOExperimentalDesign();
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
       useScaleAnimation();
@@ -226,9 +135,43 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
 
     const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
+    const mapColorStates = React.useMemo<
+      Record<NonNullable<ButtonOutline["color"]>, ColorStates>
+    >(
+      () => ({
+        // Primary button
+        primary: {
+          foreground: {
+            default: IOColors[theme["interactiveElem-default"]],
+            pressed: IOColors[theme["interactiveElem-pressed"]],
+            disabled: IOColors[theme["interactiveOutline-disabled"]]
+          },
+          background: {
+            default: hexToRgba(IOColors[theme["interactiveElem-pressed"]], 0),
+            pressed: hexToRgba(IOColors[theme["interactiveElem-pressed"]], 0.1),
+            disabled: "transparent"
+          }
+        },
+        // Contrast button
+        contrast: {
+          foreground: {
+            default: IOColors.white,
+            pressed: IOColors.white,
+            disabled: IOColors["blueIO-200"]
+          },
+          background: {
+            default: hexToRgba(IOColors["blueIO-600"], 0),
+            pressed: hexToRgba(IOColors["blueIO-600"], 0.5),
+            disabled: "transparent"
+          }
+        }
+      }),
+      [theme]
+    );
+
     const colorMap = React.useMemo(
       () => (isExperimental ? mapColorStates : mapLegacyColorStates),
-      [isExperimental]
+      [isExperimental, mapColorStates]
     );
 
     const buttonStyles = React.useMemo(
@@ -253,7 +196,7 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
       const borderColor = interpolateColor(
         progress.value,
         [0, 1],
-        [colorMap[color].border.default, colorMap[color].border.pressed]
+        [colorMap[color].foreground.default, colorMap[color].foreground.pressed]
       );
 
       return {
@@ -266,7 +209,7 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
       color: interpolateColor(
         progress.value,
         [0, 1],
-        [colorMap[color].border.default, colorMap[color].border.pressed]
+        [colorMap[color].foreground.default, colorMap[color].foreground.pressed]
       )
     }));
 
@@ -275,7 +218,7 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
       color: interpolateColor(
         progress.value,
         [0, 1],
-        [colorMap[color].label.default, colorMap[color].label.pressed]
+        [colorMap[color].foreground.default, colorMap[color].foreground.pressed]
       )
     }));
 
@@ -308,12 +251,12 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
             disabled
               ? {
                   backgroundColor: colorMap[color]?.background?.disabled,
-                  borderColor: colorMap[color]?.border?.disabled,
+                  borderColor: colorMap[color]?.foreground?.disabled,
                   opacity: DISABLED_OPACITY
                 }
               : {
                   backgroundColor: colorMap[color]?.background?.default,
-                  borderColor: colorMap[color]?.border.default
+                  borderColor: colorMap[color]?.foreground.default
                 },
             /* Prevent Reanimated from overriding background colors
                     if button is disabled */
@@ -327,14 +270,14 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
                 allowFontScaling
                 name={icon}
                 animatedProps={pressedColorIconAnimationStyle}
-                color={colorMap[color]?.label?.default}
+                color={colorMap[color]?.foreground?.default}
                 size={iconSize}
               />
             ) : (
               <AnimatedIcon
                 allowFontScaling
                 name={icon}
-                color={colorMap[color]?.label?.disabled}
+                color={colorMap[color]?.foreground?.disabled}
                 size={iconSize}
               />
             ))}
@@ -350,7 +293,7 @@ export const ButtonOutline = forwardRef<View, ButtonOutline>(
             style={[
               buttonStyles.label,
               disabled
-                ? { color: colorMap[color]?.label?.disabled }
+                ? { color: colorMap[color]?.foreground?.disabled }
                 : { ...pressedColorLabelAnimationStyle }
             ]}
           >

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 = "bluegreyLight";
-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,
-    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: {
-      default: "blue",
+    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";
@@ -47,36 +48,9 @@ const mapLegacyColorStates: Record<
   // Primary button
   primary: {
     icon: {
-      default: IOColors.blue,
+      default: IOColors["blue-500"],
       pressed: IOColors["blue-600"],
-      disabled: hexToRgba(IOColors.blue, 0.25)
-    }
-  },
-  // Neutral button
-  neutral: {
-    icon: {
-      default: IOColors.black,
-      pressed: IOColors.bluegreyDark,
-      disabled: IOColors.grey
-    }
-  },
-  // Contrast button
-  contrast: {
-    icon: {
-      default: IOColors.white,
-      pressed: hexToRgba(IOColors.white, 0.85),
-      disabled: hexToRgba(IOColors.white, 0.25)
-    }
-  }
-};
-
-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)
+      disabled: hexToRgba(IOColors["blue-500"], 0.25)
     }
   },
   // Neutral button
@@ -84,7 +58,7 @@ const mapColorStates: Record<NonNullable<IconButton["color"]>, ColorStates> = {
     icon: {
       default: IOColors.black,
       pressed: IOColors["grey-850"],
-      disabled: IOColors.grey
+      disabled: IOColors["grey-450"]
     }
   },
   // Contrast button
@@ -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