@pagopa/io-app-design-system 3.1.0 → 4.0.1

package/src/components/badge/Badge.tsx

@@ -1,12 +1,14 @@
 import React from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import { ColorValue, Platform, StyleSheet, View } from "react-native";
 import {
+  hexToRgba,
   IOBadgeHSpacing,
   IOBadgeRadius,
   IOBadgeVSpacing,
   IOColors,
   useIOExperimentalDesign,
-  useIOTheme
+  useIOTheme,
+  useIOThemeContext
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IOText } from "../typography";
@@ -28,7 +30,7 @@ export type Badge = WithTestID<{
 }>;
 
 type SolidVariantProps = {
-  background: IOColors;
+  background: ColorValue;
   foreground: IOColors;
 };
 
@@ -60,54 +62,103 @@ const styles = StyleSheet.create({
 export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+  const { themeType } = useIOThemeContext();
 
-  const mapVariants: Record<
+  const bgOpacityDarkMode = 0.2;
+
+  const mapVariantsLightMode: Record<
     NonNullable<Badge["variant"]>,
     SolidVariantProps
   > = {
     default: {
       foreground: "grey-700",
-      background: "grey-50"
+      background: IOColors["grey-50"]
     },
     info: {
       foreground: "info-850",
-      background: "info-100"
+      background: IOColors["info-100"]
     },
     warning: {
       foreground: "warning-850",
-      background: "warning-100"
+      background: IOColors["warning-100"]
     },
     success: {
       foreground: "success-850",
-      background: "success-100"
+      background: IOColors["success-100"]
     },
     error: {
       foreground: "error-850",
-      background: "error-100"
+      background: IOColors["error-100"]
     },
     purple: {
       foreground: "hanPurple-500",
-      background: "hanPurple-100"
+      background: IOColors["hanPurple-100"]
     },
     lightBlue: {
       foreground: "blueIO-850",
-      background: "blueIO-50"
+      background: IOColors["blueIO-50"]
     },
     blue: {
       foreground: "white",
-      background: theme["interactiveElem-default"]
+      background: IOColors[theme["interactiveElem-default"]]
     },
     turquoise: {
       foreground: "turquoise-850",
-      background: "turquoise-50"
+      background: IOColors["turquoise-50"]
+    },
+    contrast: {
+      foreground: "grey-700",
+      background: IOColors.white
+    }
+  };
+
+  const mapVariantsDarkMode: Record<
+    NonNullable<Badge["variant"]>,
+    SolidVariantProps
+  > = {
+    default: {
+      foreground: "grey-50",
+      background: hexToRgba(IOColors["grey-50"], bgOpacityDarkMode)
+    },
+    info: {
+      foreground: "info-400",
+      background: hexToRgba(IOColors["info-400"], bgOpacityDarkMode)
+    },
+    warning: {
+      foreground: "warning-400",
+      background: hexToRgba(IOColors["warning-400"], bgOpacityDarkMode)
+    },
+    success: {
+      foreground: "success-400",
+      background: hexToRgba(IOColors["success-400"], bgOpacityDarkMode)
+    },
+    error: {
+      foreground: "error-400",
+      background: hexToRgba(IOColors["error-400"], bgOpacityDarkMode)
+    },
+    purple: {
+      foreground: "hanPurple-250",
+      background: hexToRgba(IOColors["hanPurple-250"], bgOpacityDarkMode)
+    },
+    lightBlue: {
+      foreground: "blueIO-200",
+      background: hexToRgba(IOColors["blueIO-600"], bgOpacityDarkMode)
+    },
+    blue: {
+      foreground: "white",
+      background: IOColors[theme["interactiveElem-default"]]
+    },
+    turquoise: {
+      foreground: "turquoise-300",
+      background: hexToRgba(IOColors["turquoise-300"], bgOpacityDarkMode)
     },
     contrast: {
       foreground: "grey-700",
-      background: "white"
+      background: IOColors.white
     }
   };
 
-  const mapOutlineVariants: Record<
+  const mapOutlineVariantsLightMode: Record<
     NonNullable<Badge["variant"]>,
     OutlinedVariantProps
   > = {
@@ -143,9 +194,48 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
     }
   };
 
-  const { background, foreground } = (
-    outline ? mapOutlineVariants : mapVariants
-  )[variant];
+  const mapOutlineVariantsDarkMode: Record<
+    NonNullable<Badge["variant"]>,
+    OutlinedVariantProps
+  > = {
+    default: {
+      foreground: "grey-100"
+    },
+    info: {
+      foreground: "info-400"
+    },
+    warning: {
+      foreground: "warning-400"
+    },
+    success: {
+      foreground: "success-400"
+    },
+    error: {
+      foreground: "error-400"
+    },
+    purple: {
+      foreground: "hanPurple-250"
+    },
+    lightBlue: {
+      foreground: "blueIO-150"
+    },
+    blue: {
+      foreground: theme["interactiveElem-default"]
+    },
+    turquoise: {
+      foreground: "turquoise-300"
+    },
+    contrast: {
+      foreground: "grey-100"
+    }
+  };
+
+  // prettier-ignore
+  const variantMap = themeType === "light"
+    ? (outline ? mapOutlineVariantsLightMode : mapVariantsLightMode)
+    : (outline ? mapOutlineVariantsDarkMode : mapVariantsDarkMode);
+
+  const { background, foreground } = variantMap[variant];
 
   return (
     <View
@@ -159,7 +249,7 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
               borderColor: IOColors[foreground]
             }
           : {
-              backgroundColor: background ? IOColors[background] : undefined
+              backgroundColor: background ?? undefined
             }
       ]}
     >

package/src/components/banner/Banner.tsx

@@ -33,7 +33,7 @@ import {
   PictogramBleed
 } from "../pictograms";
 import { VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 
 /* Styles */
 const colorTitle: IOColors = "blueIO-850";
@@ -157,7 +157,7 @@ export const Banner = ({
   onClose,
   accessibilityHint,
   accessibilityLabel,
-  testID,
+  testID
 }: Banner) => {
   const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
@@ -197,7 +197,9 @@ export const Banner = ({
 
   /* Generates a complete fallbackAccessibilityLabel by concatenating the title, content, and action
    if they are present. */
-  const fallbackAccessibilityLabel = [title, content, action].filter(Boolean).join(" ");
+  const fallbackAccessibilityLabel = [title, content, action]
+    .filter(Boolean)
+    .join(" ");
 
   const renderMainBlock = () => (
     <>
@@ -219,9 +221,9 @@ export const Banner = ({
         )}
         {content && (
           <>
-            <LabelSmall color={colorContent} weight={"Regular"}>
+            <BodySmall color={colorContent} weight={"Regular"}>
               {content}
-            </LabelSmall>
+            </BodySmall>
             {action && <VSpacer size={8} />}
           </>
         )}

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

@@ -82,7 +82,7 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
             {
               "color": "#031344",
               "fontFamily": "Titillio",
-              "fontSize": 18,
+              "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "600",
               "lineHeight": 24,
@@ -546,7 +546,7 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
                     "fontFamily": "Titillium Sans Pro",
                     "fontSize": 16,
                     "fontStyle": "normal",
-                    "fontWeight": "700",
+                    "fontWeight": "600",
                     "lineHeight": undefined,
                   },
                   {

package/src/components/buttons/ButtonLink.tsx

@@ -238,7 +238,7 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
             font={isExperimental ? "Titillio" : "TitilliumSansPro"}
-            weight={isExperimental ? "Semibold" : "Bold"}
+            weight={"Semibold"}
             size={buttonTextFontSize}
             style={
               disabled

package/src/components/buttons/ButtonOutline.tsx

@@ -375,7 +375,7 @@ export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
           )}
           <AnimatedIOText
             font={isExperimental ? "Titillio" : "TitilliumSansPro"}
-            weight={isExperimental ? "Semibold" : "Bold"}
+            weight={"Semibold"}
             size={buttonTextFontSize}
             accessible={false}
             accessibilityElementsHidden

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

@@ -805,7 +805,7 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
             "fontFamily": "Titillium Sans Pro",
             "fontSize": 16,
             "fontStyle": "normal",
-            "fontWeight": "700",
+            "fontWeight": "600",
             "lineHeight": undefined,
           },
           {
@@ -911,7 +911,7 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
             "fontFamily": "Titillium Sans Pro",
             "fontSize": 16,
             "fontStyle": "normal",
-            "fontWeight": "700",
+            "fontWeight": "600",
             "lineHeight": undefined,
           },
           [
@@ -1031,7 +1031,7 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
               "fontFamily": "Titillium Sans Pro",
               "fontSize": 16,
               "fontStyle": "normal",
-              "fontWeight": "700",
+              "fontWeight": "600",
               "lineHeight": 20,
             },
             {

package/src/components/featureInfo/FeatureInfo.tsx

@@ -1,14 +1,13 @@
 import React, { ReactNode } from "react";
 import { GestureResponderEvent, View } from "react-native";
 import {
-  Body,
+  BodySmall,
   HSpacer,
   IOIconSizeScale,
   IOIcons,
   IOPictogramSizeScale,
   IOPictograms,
   Icon,
-  Label,
   Pictogram,
   VSpacer
 } from "../../components";
@@ -44,9 +43,9 @@ const DEFAULT_PICTOGRAM_SIZE: IOPictogramSizeScale = 48;
 const renderNode = (body: FeatureInfoProps["body"]) => {
   if (typeof body === "string") {
     return (
-      <Body color="grey-700" testID="infoScreenBody">
+      <BodySmall color="grey-700" testID="infoScreenBody">
         {body}
-      </Body>
+      </BodySmall>
     );
   }
 
@@ -75,7 +74,8 @@ export const FeatureInfo = ({
           This verbose code could be deleted once we got "gap"
           property support */}
           {body && <VSpacer size={4} />}
-          <Label
+          <BodySmall
+            weight="Semibold"
             asLink
             onPress={action.onPress}
             accessible
@@ -83,7 +83,7 @@ export const FeatureInfo = ({
             accessibilityElementsHidden={false}
           >
             {action.label}
-          </Label>
+          </BodySmall>
         </>
       )}
     </View>

package/src/components/layout/HeaderFirstLevel.tsx

@@ -126,6 +126,7 @@ export const HeaderFirstLevel = ({
       <View style={styles.headerInner}>
         <View ref={titleRef} accessible accessibilityRole="header">
           <H3
+            weight="Bold"
             style={{ flexShrink: 1 }}
             numberOfLines={1}
             color={

package/src/components/listitems/ListItemCheckbox.tsx

@@ -24,7 +24,7 @@ import {
 import { AnimatedCheckbox } from "../checkbox/AnimatedCheckbox";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 
 type Props = {
   value: string;
@@ -188,9 +188,9 @@ export const ListItemCheckbox = ({
               <VSpacer
                 size={IOSelectionListItemVisualParams.descriptionMargin}
               />
-              <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+              <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
                 {description}
-              </LabelSmall>
+              </BodySmall>
             </View>
           )}
         </Animated.View>

package/src/components/listitems/ListItemInfo.tsx

@@ -12,7 +12,7 @@ import { ButtonLink, IconButton } from "../buttons";
 import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 
 type ButtonLinkActionProps = {
   type: "buttonLink";
@@ -84,9 +84,9 @@ export const ListItemInfo = ({
   const itemInfoTextComponent = useMemo(
     () => (
       <View accessible={Platform.OS === "ios"}>
-        <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+        <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
           {label}
-        </LabelSmall>
+        </BodySmall>
         {typeof value === "string" ? (
           <H6 color={theme["textBody-default"]} numberOfLines={numberOfLines}>
             {value}

package/src/components/listitems/ListItemInfoCopy.tsx

@@ -22,7 +22,7 @@ import {
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { BodySmall, H6 } from "../typography";
 
 export type ListItemInfoCopy = WithTestID<{
   label: string;
@@ -69,9 +69,9 @@ export const ListItemInfoCopy = ({
 
   const listItemInfoCopyContent = (
     <>
-      <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+      <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
         {label}
-      </LabelSmall>
+      </BodySmall>
       {/* Let developer using a custom component (e.g: skeleton) */}
       {typeof value === "string" ? (
         <H6 color={foregroundColor} numberOfLines={numberOfLines}>

package/src/components/listitems/ListItemNav.tsx

@@ -33,7 +33,7 @@ import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { HSpacer, VSpacer } from "../spacer";
-import { Caption, H6, LabelSmall } from "../typography";
+import { Caption, H6, BodySmall } from "../typography";
 
 type ListItemTopElementProps =
   | {
@@ -161,9 +161,9 @@ export const ListItemNav = ({
       {description && (
         <>
           {typeof description === "string" ? (
-            <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+            <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
               {description}
-            </LabelSmall>
+            </BodySmall>
           ) : (
             description
           )}

package/src/components/listitems/ListItemNavAlert.tsx

@@ -22,7 +22,7 @@ import {
 } from "../../core";
 import { WithTestID } from "../../utils/types";
 import { Icon } from "../icons";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 
 export type ListItemNavAlert = WithTestID<{
   value: string | React.ReactNode;
@@ -82,9 +82,9 @@ export const ListItemNavAlert = ({
       {description && (
         <>
           {typeof description === "string" ? (
-            <LabelSmall weight="Semibold" color={theme.errorText}>
+            <BodySmall weight="Semibold" color={theme.errorText}>
               {description}
-            </LabelSmall>
+            </BodySmall>
           ) : (
             description
           )}

package/src/components/listitems/ListItemRadio.tsx

@@ -27,7 +27,7 @@ import { IOIcons, Icon } from "../icons";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 
 type ListItemRadioGraphicProps =
   | { icon?: never; paymentLogo: IOLogoPaymentType; uri?: never }
@@ -287,9 +287,9 @@ export const ListItemRadio = ({
               <VSpacer
                 size={IOSelectionListItemVisualParams.descriptionMargin}
               />
-              <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+              <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
                 {description}
-              </LabelSmall>
+              </BodySmall>
             </View>
           )}
         </Animated.View>

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -5,7 +5,7 @@ import { IOColors, useIOTheme } from "../../core";
 import { Icon } from "../icons";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 import { PressableListItemBase } from "./PressableListItemsBase";
 
 export type ListItemRadioWithAmountProps = {
@@ -55,22 +55,22 @@ export const ListItemRadioWithAmount = ({
       }}
     >
       <View style={{ flexShrink: 1 }}>
-        <LabelSmall
+        <BodySmall
           weight="Semibold"
           numberOfLines={1}
           color={theme["textBody-default"]}
         >
           {label}
-        </LabelSmall>
+        </BodySmall>
         {isSuggested && (
           <>
             <VSpacer size={4} />
             <View style={styles.rowCenter}>
               <Icon name="sparkles" size={16} color={suggestColor} />
               <HSpacer size={4} />
-              <LabelSmall weight="Regular" color={suggestColor}>
+              <BodySmall weight="Regular" color={suggestColor}>
                 {suggestReason}
-              </LabelSmall>
+              </BodySmall>
             </View>
           </>
         )}

package/src/components/listitems/ListItemSwitch.tsx

@@ -1,18 +1,18 @@
 import React, { useMemo } from "react";
 import { GestureResponderEvent, Platform, Switch, View } from "react-native";
-import { WithTestID } from "../../utils/types";
 import {
   IOSelectionListItemStyles,
   IOSelectionListItemVisualParams,
   useIOTheme
 } from "../../core";
+import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { HSpacer, VSpacer } from "../spacer";
 import { NativeSwitch } from "../switch/NativeSwitch";
-import { H6, LabelMini, LabelSmall } from "../typography";
+import { BodySmall, H6, LabelMini } from "../typography";
 
 type PartialProps = WithTestID<{
   label: string;
@@ -178,9 +178,9 @@ export const ListItemSwitch = React.memo(
         {description && (
           <>
             <VSpacer size={IOSelectionListItemVisualParams.descriptionMargin} />
-            <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+            <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
               {description}
-            </LabelSmall>
+            </BodySmall>
           </>
         )}
         {action && (

package/src/components/listitems/ListItemTransaction.tsx

@@ -21,7 +21,7 @@ import { IOIconSizeScale, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
 import { VSpacer } from "../spacer";
 import { HStack } from "../stack";
-import { H6, LabelSmall } from "../typography";
+import { H6, BodySmall } from "../typography";
 import {
   PressableBaseProps,
   PressableListItemBase
@@ -146,16 +146,16 @@ export const ListItemTransaction = ({
           </View>
         )}
         <View style={{ flexShrink: 1 }}>
-          <LabelSmall
+          <BodySmall
             numberOfLines={numberOfLines}
             color={theme["textBody-default"]}
             weight="Semibold"
           >
             {title}
-          </LabelSmall>
-          <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
+          </BodySmall>
+          <BodySmall weight="Regular" color={theme["textBody-tertiary"]}>
             {subtitle}
-          </LabelSmall>
+          </BodySmall>
         </View>
       </HStack>
       <HStack style={{ alignItems: "center" }}>

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

@@ -262,7 +262,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -384,7 +384,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -551,7 +551,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -780,7 +780,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -1082,7 +1082,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -1366,7 +1366,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillio",
-                "fontSize": 18,
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 24,
@@ -1774,7 +1774,7 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
                 "fontFamily": "Titillium Sans Pro",
                 "fontSize": 16,
                 "fontStyle": "normal",
-                "fontWeight": "700",
+                "fontWeight": "600",
                 "lineHeight": 20,
               },
             ]