[IOPLT-968] Add dark mode version to NumberPad component (#425)

> [!note]
> To avoid confusion between light and dark mode, this PR introduces a
breaking change:
> `dark` → `primary`
> `light` → `neutral`

## Short description
This PR adds the dark mode version to the `NumberPad` component

## List of changes proposed in this pull request
- Change `variant` accepted values of the `NumberPad` and `CodeInput`
components
- Add dark mode version to the `NumberButton` component
- Add haptic feedback when the citizen presses the `NumberButton`

### Preview


https://github.com/user-attachments/assets/2005aed5-b4d9-4492-a30c-48b9163d1212



## How to test
1. Launch the example app
2. Go to the **Number Pad** page.
3. Enable/Disable primary background. Enable/Disable dark mode.

Author: dmnplb

example/src/pages/NumberPad.tsx

@@ -80,7 +80,7 @@ export const NumberPadScreen = () => {
         <CodeInput
           value={value}
           length={PIN_LENGTH}
-          variant={blueBackground ? "light" : "dark"}
+          variant={blueBackground ? "primary" : "neutral"}
           onValueChange={setValue}
           onValidate={v => v === "123456"}
         />
@@ -89,7 +89,7 @@ export const NumberPadScreen = () => {
           deleteAccessibilityLabel="Delete"
           onNumberPress={onNumberPress}
           onDeletePress={onDeletePress}
-          variant={blueBackground ? "dark" : "light"}
+          variant={blueBackground ? "primary" : "neutral"}
           biometricType="FACE_ID"
           biometricAccessibilityLabel="Face ID"
           onBiometricPress={onBiometricPress}

src/components/codeInput/CodeInput.tsx

@@ -11,7 +11,7 @@ type CodeInputProps = {
   onValueChange: (value: string) => void;
   length: number;
   onValidate: (value: string) => boolean;
-  variant?: "light" | "dark";
+  variant?: "primary" | "neutral";
 };
 
 const DOT_SIZE = 16;
@@ -47,35 +47,39 @@ export const CodeInput = ({
   length,
   value,
   onValueChange,
-  variant = "light",
+  variant = "primary",
   onValidate
 }: CodeInputProps) => {
   const [status, setStatus] = useState<"default" | "error">("default");
-  const { themeType } = useIOThemeContext();
+  const { themeType, theme } = useIOThemeContext();
 
   const { translate, animatedStyle, shakeAnimation } = useErrorShakeAnimation();
 
   /* Empty Dot
   - Right color depending on both theme and variant */
   const emptyDotColorLightBg = IOColors["grey-650"];
-  const emptyDotColorDarkBg = hexToRgba(IOColors.white, 0.75);
+  const emptyDotColorDarkBg = IOColors["grey-300"];
+  const emptyDotColorAccentBg = hexToRgba(IOColors.white, 0.75);
+
   const emptyDotColorThemeBased =
     themeType === "light" ? emptyDotColorLightBg : emptyDotColorDarkBg;
 
   const emptyDotColor =
-    variant === "light" ? emptyDotColorDarkBg : emptyDotColorThemeBased;
+    variant === "primary" ? emptyDotColorAccentBg : emptyDotColorThemeBased;
 
   /* Filled Dot
   - Right color depending on theme, variant and status */
   const filledDotColorLightBg = IOColors.black;
   const filledDotColorDarkBg = IOColors.white;
+  const filledDotColorError =
+    variant === "primary" ? IOColors["error-400"] : IOColors[theme.errorText];
   const filledDotColorThemeBased =
     themeType === "light" ? filledDotColorLightBg : filledDotColorDarkBg;
 
   const filledDotColor =
     status === "error"
-      ? IOColors["error-600"]
-      : variant === "light"
+      ? filledDotColorError
+      : variant === "primary"
       ? filledDotColorDarkBg
       : filledDotColorThemeBased;
 

src/components/numberpad/NumberButton.tsx

@@ -1,23 +1,26 @@
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo } from "react";
 import { Pressable } from "react-native";
+import ReactNativeHapticFeedback from "react-native-haptic-feedback";
 import Animated, {
   interpolateColor,
   useAnimatedStyle,
   useReducedMotion
 } from "react-native-reanimated";
 import {
+  hexToRgba,
   IOColors,
   IONumberPadButtonStyles,
-  useIONewTypeface
+  useIONewTypeface,
+  useIOTheme
 } from "../../core";
 import { useScaleAnimation } from "../../hooks";
 import { IOText } from "../typography";
 
-type NumberButtonVariantType = "light" | "dark";
+type NumberButtonVariantType = "neutral" | "primary";
 
 type NumberButtonProps = {
   /**
-   * Used to choose the component color variant between `dark` and `light`.
+   * Used to choose the component color variant between `neutral` and `primary`.
    */
   variant: NumberButtonVariantType;
   /**
@@ -38,31 +41,39 @@ type ColorMapVariant = {
   foreground: IOColors;
 };
 
-const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = {
-  light: {
-    background: IOColors["grey-50"],
-    pressed: IOColors["grey-200"],
-    foreground: "blueIO-500"
-  },
-  dark: {
-    background: IOColors["blueIO-400"],
-    pressed: IOColors["blueIO-200"],
-    foreground: "white"
-  }
-};
-
 /**
  * Based on a `Pressable` element, it displays a number button with animations on press In and Out.
  *
  * @returns {JSX.Element} The rendered `NumberButton`
  */
 export const NumberButton = memo(
   ({ number, variant, onPress }: NumberButtonProps) => {
+    const theme = useIOTheme();
+
     const { progress, onPressIn, onPressOut, scaleAnimatedStyle } =
-      useScaleAnimation("slight");
+      useScaleAnimation("medium");
     const reducedMotion = useReducedMotion();
     const { newTypefaceEnabled } = useIONewTypeface();
 
+    const colorMap: Record<NumberButtonVariantType, ColorMapVariant> = useMemo(
+      () => ({
+        neutral: {
+          background: hexToRgba(
+            IOColors[theme["interactiveElem-default"]],
+            0.1
+          ),
+          pressed: hexToRgba(IOColors[theme["interactiveElem-default"]], 0.35),
+          foreground: theme["interactiveElem-default"]
+        },
+        primary: {
+          background: hexToRgba(IOColors.white, 0.15),
+          pressed: hexToRgba(IOColors.white, 0.5),
+          foreground: "white"
+        }
+      }),
+      [theme]
+    );
+
     // Interpolate animation values from `isPressed` values
     const pressedAnimationStyle = useAnimatedStyle(() => ({
       backgroundColor: interpolateColor(
@@ -73,6 +84,7 @@ export const NumberButton = memo(
     }));
 
     const handleOnPress = useCallback(() => {
+      ReactNativeHapticFeedback.trigger("impactLight");
       onPress(number);
     }, [number, onPress]);
 

src/components/numberpad/NumberPad.tsx

@@ -70,7 +70,7 @@ const mapIconSpecByBiometric: Record<
  * @returns {JSX.Element} The rendered numeric keyboard component.
  */
 export const NumberPad = ({
-  variant = "dark",
+  variant = "primary",
   biometricType,
   biometricAccessibilityLabel,
   deleteAccessibilityLabel,
@@ -101,7 +101,7 @@ export const NumberPad = ({
             <ButtonWrapper key={item}>
               <IconButton
                 icon="cancel"
-                color={variant === "dark" ? "contrast" : "primary"}
+                color={variant === "primary" ? "contrast" : "primary"}
                 onPress={onDeletePress}
                 accessibilityLabel={deleteAccessibilityLabel}
               />
@@ -114,7 +114,7 @@ export const NumberPad = ({
               <IconButton
                 icon={mapIconSpecByBiometric[biometricType].icon}
                 iconSize={mapIconSpecByBiometric[biometricType].size}
-                color={variant === "dark" ? "contrast" : "primary"}
+                color={variant === "primary" ? "contrast" : "primary"}
                 onPress={onBiometricPress}
                 accessibilityLabel={biometricAccessibilityLabel}
               />

stories/components/numberpad/NumberPad.stories.tsx

@@ -22,6 +22,6 @@ type Story = StoryObj<typeof meta>;
 export const Light: Story = {
   args: {
     deleteAccessibilityLabel: "Delete",
-    variant: "light"
+    variant: "neutral"
   }
 };