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

package/src/components/tag/Tag.tsx

@@ -3,6 +3,8 @@ import { Platform, StyleSheet, View } from "react-native";
 import {
   IOColors,
   IOTagRadius,
+  IOTheme,
+  IOThemeLight,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
@@ -15,9 +17,21 @@ import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { IOText } from "../typography";
 
+const IconColorsMap: Record<string, keyof IOTheme> = {
+  primary: "interactiveElem-default",
+  warning: "warningIcon",
+  error: "errorIcon",
+  success: "successIcon",
+  info: "infoIcon",
+  grey: "icon-default",
+  lightGrey: "icon-decorative"
+};
+
+type IconColorVariant = keyof typeof IconColorsMap;
+
 type VariantProps = {
-  iconColor: IOColors;
-  iconName: IOIcons;
+  color: IconColorVariant;
+  name: IOIcons;
 };
 
 type TextProps =
@@ -30,8 +44,7 @@ type TextProps =
       iconAccessibilityLabel: string;
     };
 
-export type Tag = TextProps &
-  WithTestID<
+export type Tag = TextProps & { forceLightMode?: boolean } & WithTestID<
     | {
         variant:
           | "qrCode"
@@ -42,11 +55,12 @@ export type Tag = TextProps &
           | "success"
           | "attachment"
           | "noIcon";
-        customIconProps?: never;
+        iconName?: never;
+        icon?: never;
       }
     | {
-        variant: "customIcon";
-        customIconProps: VariantProps;
+        variant: "custom";
+        icon: VariantProps;
       }
   >;
 
@@ -64,9 +78,7 @@ const styles = StyleSheet.create({
         textAlignVertical: "center"
       }
     }),
-    backgroundColor: IOColors.white,
     borderWidth: 1,
-    borderColor: IOColors["grey-100"],
     borderRadius: IOTagRadius,
     borderCurve: "continuous",
     paddingHorizontal: IOTagHSpacing,
@@ -82,45 +94,46 @@ const styles = StyleSheet.create({
 
 const getVariantProps = (
   variant: NonNullable<Tag["variant"]>,
-  customIconProps?: VariantProps
+  customIcon?: VariantProps
 ): VariantProps | undefined => {
+  if (variant === "custom" && customIcon) {
+    return customIcon;
+  }
   switch (variant) {
-    case "customIcon":
-      return customIconProps;
     case "qrCode":
       return {
-        iconColor: "blueIO-500",
-        iconName: "qrCode"
+        color: "primary",
+        name: "qrCode"
       };
     case "attachment":
       return {
-        iconColor: "grey-700",
-        iconName: "attachment"
+        color: "grey",
+        name: "attachment"
       };
     case "legalMessage":
       return {
-        iconColor: "blueIO-500",
-        iconName: "legalValue"
+        color: "primary",
+        name: "legalValue"
       };
     case "info":
       return {
-        iconColor: "info-700",
-        iconName: "info"
+        color: "info",
+        name: "infoFilled"
       };
     case "warning":
       return {
-        iconColor: "warning-700",
-        iconName: "warningFilled"
+        color: "warning",
+        name: "warningFilled"
       };
     case "error":
       return {
-        iconColor: "error-600",
-        iconName: "errorFilled"
+        color: "error",
+        name: "errorFilled"
       };
     case "success":
       return {
-        iconColor: "success-700",
-        iconName: "success"
+        color: "success",
+        name: "success"
       };
     case "noIcon":
       return undefined;
@@ -136,21 +149,37 @@ export const Tag = ({
   text,
   variant,
   testID,
-  customIconProps,
-  iconAccessibilityLabel
+  icon,
+  iconAccessibilityLabel,
+  forceLightMode = false
 }: Tag) => {
   const theme = useIOTheme();
   const { isExperimental } = useIOExperimentalDesign();
 
-  const variantProps = getVariantProps(variant, customIconProps);
+  const variantProps = getVariantProps(variant, icon);
+
+  const borderColor = forceLightMode
+    ? IOColors[IOThemeLight["cardBorder-default"]]
+    : IOColors[theme["cardBorder-default"]];
+
+  const backgroundColor = forceLightMode
+    ? IOColors[IOThemeLight["appBackground-primary"]]
+    : IOColors[theme["appBackground-primary"]];
 
   return (
-    <View testID={testID} style={styles.tag}>
+    <View
+      testID={testID}
+      style={[styles.tag, { borderColor, backgroundColor }]}
+    >
       {variantProps && (
         <View style={styles.iconWrapper}>
           <Icon
-            name={variantProps.iconName}
-            color={variantProps.iconColor}
+            name={variantProps.name}
+            color={
+              forceLightMode
+                ? IOThemeLight[IconColorsMap[variantProps.color]]
+                : theme[IconColorsMap[variantProps.color]]
+            }
             size={IOTagIconSize}
             accessible={!!iconAccessibilityLabel}
             accessibilityLabel={iconAccessibilityLabel}
@@ -164,7 +193,11 @@ export const Tag = ({
           weight={"Semibold"}
           size={12}
           lineHeight={16}
-          color={theme["textBody-tertiary"]}
+          color={
+            forceLightMode
+              ? IOThemeLight["textBody-tertiary"]
+              : theme["textBody-tertiary"]
+          }
           numberOfLines={1}
           ellipsizeMode="tail"
           style={{

package/src/components/typography/IOText.tsx

@@ -10,7 +10,6 @@ import { IOColors, useIOExperimentalDesign, useIOTheme } from "../../core";
 import { useBoldTextEnabled } from "../../utils/accessibility";
 import {
   IOFontFamily,
-  IOFontSize,
   IOFontWeight,
   makeFontStyleObject
 } from "../../utils/fonts";
@@ -37,7 +36,7 @@ export type TypographicStyleProps = Omit<
  * cannot be included in the default StyleProp<TextStyle>
  */
 type IOTextBaseProps = {
-  size?: IOFontSize;
+  size?: number;
   weight?: IOFontWeight;
   color?: IOColors;
   font?: IOFontFamily;

package/src/core/IOColors.ts

@@ -53,6 +53,7 @@ export const IOColors = asIOColors({
   "turquoise-850": "#003B3D",
   "turquoise-500": "#00C5CA",
   "turquoise-450": "#19CBCF" /* Dark mode */,
+  "turquoise-300": "#61DCDF",
   "turquoise-150": "#AAEEEF",
   "turquoise-100": "#C2F3F4",
   "turquoise-50": "#DBF9FA",
@@ -283,7 +284,10 @@ const themeKeys = [
   // Status
   "errorIcon",
   "errorText",
+  "successIcon",
   "successText",
+  "warningIcon",
+  "infoIcon",
   // Pictograms
   "pictogram-hands",
   "pictogram-tint-main",
@@ -322,7 +326,10 @@ export const IOThemeLight: IOTheme = {
   // Status
   errorIcon: "error-600",
   errorText: "error-600",
+  successIcon: "success-700",
   successText: "success-700",
+  warningIcon: "warning-700",
+  infoIcon: "info-700",
   // Pictograms
   "pictogram-hands": "blueIO-500",
   "pictogram-tint-main": "turquoise-150",
@@ -356,6 +363,7 @@ export const IOThemeDark: IOTheme = {
   // Design System related
   "cardBorder-default": "grey-850",
   "icon-default": "grey-450",
+  "icon-decorative": "grey-650",
   // Layout
   "divider-header": "grey-850",
   "divider-default": "grey-850",
@@ -364,6 +372,9 @@ export const IOThemeDark: IOTheme = {
   errorIcon: "error-400",
   errorText: "error-400",
   successText: "success-400",
+  successIcon: "success-500",
+  warningIcon: "warning-500",
+  infoIcon: "info-500",
   // Pictograms
   "pictogram-hands": "white",
   "pictogram-tint-main": "turquoise-150",

package/src/utils/fonts.ts

@@ -73,7 +73,7 @@ export const fontWeights: Record<IOFontWeight, IOFontWeightNumeric> = {
 };
 
 type FontStyleObject = {
-  fontSize: IOFontSize;
+  fontSize: IOFontSize | number;
   /* We also accept `string` because Android needs a composed 
   fontFamily name, like `TitilliumSansPro-Regular` */
   fontFamily: string | IOFontFamily;
@@ -132,7 +132,7 @@ const defaultFontSize: IOFontSize = 16;
  */
 
 export const makeFontStyleObject = (
-  size: IOFontSize = defaultFontSize,
+  size: number = defaultFontSize,
   font: IOFontFamily = defaultFont,
   lineHeight: TextStyle["lineHeight"],
   weight: IOFontWeight = defaultWeight,