cdslibrary 1.0.55 → 1.1.2

package/tokens/CDSsemanticTextStyles.js

@@ -1,211 +1,199 @@
 import { useFonts, Inter_400Regular, Inter_600SemiBold, Inter_700Bold } from "@expo-google-fonts/inter";
 
 import { CDSprimitiveFontValues } from "./CDSprimitiveTokens";
-import { Dimensions } from "react-native";
-
-const { width } = Dimensions.get("window");
-const isMobile = width <= 768;
-
-
-export const getSemanticTextStyles = (theme) => ({
-  h1: {
-    fontFamily: CDSprimitiveFontValues.family.interBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile["3xl"]
-      : CDSprimitiveFontValues.size.typography.desktop["3xl"],
-    color: theme.text.neutral.primary,
-  },
-  h2: {
-    fontFamily: CDSprimitiveFontValues.family.interBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile["2xl"]
-      : CDSprimitiveFontValues.size.typography.desktop["2xl"],
-    color: theme.text.neutral.primary,
-  },
-  h3: {
-    fontFamily: CDSprimitiveFontValues.family.interBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.xl
-      : CDSprimitiveFontValues.size.typography.desktop.xl,
-    color: theme.text.neutral.primary,
-  },
-  h4: {
-    fontFamily: CDSprimitiveFontValues.family.interBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.lg
-      : CDSprimitiveFontValues.size.typography.desktop.lg,
-    color: theme.text.neutral.primary,
-  },
-
-regular: {
-  lg: {
-    fontFamily: CDSprimitiveFontValues.family.interRegular,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.lg
-      : CDSprimitiveFontValues.size.typography.desktop.lg,
-    color: theme.text.neutral.primary,
-  },
-
-  md: {
-    fontFamily: CDSprimitiveFontValues.family.interRegular,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.md
-      : CDSprimitiveFontValues.size.typography.desktop.md,
-    color: theme.text.neutral.primary,
-  },
-
-  sm: {
-    fontFamily: CDSprimitiveFontValues.family.interRegular,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.sm
-      : CDSprimitiveFontValues.size.typography.desktop.sm,
-    color: theme.text.neutral.primary,
-  },
-
-  xs: {
-    fontFamily: CDSprimitiveFontValues.family.interRegular,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.xs
-      : CDSprimitiveFontValues.size.typography.desktop.xs,
-    color: theme.text.neutral.primary,
-  },
-},
-bold: {
-  lg: {
-    fontFamily: CDSprimitiveFontValues.family.interBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.lg
-      : CDSprimitiveFontValues.size.typography.desktop.lg,
-    color: theme.text.neutral.primary,
-  },
-
-  md: {
-    fontFamily: CDSprimitiveFontValues.family.interBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.md
-      : CDSprimitiveFontValues.size.typography.desktop.md,
-    color: theme.text.neutral.primary,
-  },
-
-  sm: {
-    fontFamily: CDSprimitiveFontValues.family.interBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.sm
-      : CDSprimitiveFontValues.size.typography.desktop.sm,
-    color: theme.text.neutral.primary,
-  },
-
-  xs: {
-    fontFamily: CDSprimitiveFontValues.family.interBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.xs
-      : CDSprimitiveFontValues.size.typography.desktop.xs,
-    color: theme.text.neutral.primary,
-  },
-},
-semiBold: {
-  lg: {
-    fontFamily: CDSprimitiveFontValues.family.interSemiBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.lg
-      : CDSprimitiveFontValues.size.typography.desktop.lg,
-    color: theme.text.neutral.primary,
-  },
-
-  md: {
-    fontFamily: CDSprimitiveFontValues.family.interSemiBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.md
-      : CDSprimitiveFontValues.size.typography.desktop.md,
-    color: theme.text.neutral.primary,
-  },
-
-  sm: {
-    fontFamily: CDSprimitiveFontValues.family.interSemiBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.sm
-      : CDSprimitiveFontValues.size.typography.desktop.sm,
-    color: theme.text.neutral.primary,
-  },
-
-  xs: {
-    fontFamily: CDSprimitiveFontValues.family.interSemiBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.xs
-      : CDSprimitiveFontValues.size.typography.desktop.xs,
-    color: theme.text.neutral.primary,
-  },
-},
-  
-  label: {
-    fontFamily: CDSprimitiveFontValues.family.interSemiBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.sm
-      : CDSprimitiveFontValues.size.typography.desktop.sm,
-    color: theme.text.neutral.primary,
-    lineHeight: isMobile
-      ? CDSprimitiveFontValues.lineHeight.mobile.sm
-      : CDSprimitiveFontValues.lineHeight.desktop.sm,
-  },
-  inputText: {
-    placeholder: {
-      fontFamily: CDSprimitiveFontValues.family.interRegular,
-      fontSize: isMobile
-        ? CDSprimitiveFontValues.size.typography.mobile.md
-        : CDSprimitiveFontValues.size.typography.desktop.md,
-      color: theme.text.neutral.placeholder,
+
+
+export const getSemanticTextStyles = (theme, isMobile) => {
+  // Función de ayuda corregida
+  const getVal = (category, size) => {
+    // category puede ser 'size' o 'lineHeight'
+    const platform = isMobile ? 'mobile' : 'desktop';
+
+    // Si buscamos tamaños de letra, la ruta es: size.typography.plataforma.size
+    if (category === 'size') {
+      return CDSprimitiveFontValues.size.typography[platform][size];
+    }
+
+    // Si buscamos interlineado, la ruta es: lineHeight.plataforma.size
+    if (category === 'lineHeight') {
+      return CDSprimitiveFontValues.lineHeight[platform][size];
+    }
+
+    // Para iconografía
+    if (category === 'icon') {
+      return CDSprimitiveFontValues.size.iconography[platform][size];
+    }
+  };
+
+  return {
+    h1: {
+      fontFamily: CDSprimitiveFontValues.family.interBold,
+      fontSize: getVal('size', '3xl'),
+      lineHeight: getVal('lineHeight', '3xl'),
+      color: theme.text.neutral.primary,
     },
-    value: {
-      fontFamily: CDSprimitiveFontValues.family.interRegular,
-      fontSize: isMobile
-        ? CDSprimitiveFontValues.size.typography.mobile.md
-        : CDSprimitiveFontValues.size.typography.desktop.md,
+    h2: {
+      fontFamily: CDSprimitiveFontValues.family.interBold,
+      fontSize: getVal('size', '2xl'),
+      lineHeight: getVal('lineHeight', '2xl'),
       color: theme.text.neutral.primary,
     },
-  },
-
-  link: {
-    regular: {
+    h3: {
       fontFamily: CDSprimitiveFontValues.family.interBold,
-      fontSize: isMobile
-        ? CDSprimitiveFontValues.size.typography.mobile.md
-        : CDSprimitiveFontValues.size.typography.desktop.md,
+      fontSize: getVal('size', 'xl'),
+      lineHeight: getVal('lineHeight', 'xl'),
       color: theme.text.neutral.primary,
-      textDecorationLine: "underline",
     },
-    small: {
+    h4: {
       fontFamily: CDSprimitiveFontValues.family.interBold,
-      fontSize: isMobile
-        ? CDSprimitiveFontValues.size.typography.mobile.sm
-        : CDSprimitiveFontValues.size.typography.desktop.sm,
+      fontSize: getVal('size', 'lg'),
+      lineHeight: getVal('lineHeight', 'lg'),
       color: theme.text.neutral.primary,
-      textDecorationLine: "underline",
     },
-  },
-
-  buttonText: {
-    fontFamily: CDSprimitiveFontValues.family.interBold,
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.typography.mobile.md
-      : CDSprimitiveFontValues.size.typography.desktop.md,
-  },
-
-  icon: {
-    fontSize: isMobile
-      ? CDSprimitiveFontValues.size.iconography.mobile.sm
-      : CDSprimitiveFontValues.size.iconography.desktop.sm,
-  },
-
-  highlightText: {
-    color: theme.text.brand.primary,
-  },
-  // h5: {
-  //   fontFamily: primitiveFontValues.family.interBold,
-  //   fontSize: isMobile ? primitiveFontValues.size.typography.mobile.md : primitiveFontValues.size.typography.desktop.md,
-  // },
-  // h6: {
-  //   fontFamily: primitiveFontValues.family.interBold,
-  //   fontSize: isMobile ? primitiveFontValues.size.typography.mobile.sm : primitiveFontValues.size.typography.desktop.sm,
-  // },
-});
+
+    regular: {
+      lg: {
+        fontFamily: CDSprimitiveFontValues.family.interRegular,
+        fontSize: getVal('size', 'lg'),
+        lineHeight: getVal('lineHeight', 'lg'),
+        color: theme.text.neutral.primary,
+      },
+      md: {
+        fontFamily: CDSprimitiveFontValues.family.interRegular,
+        fontSize: getVal('size', 'md'),
+        lineHeight: getVal('lineHeight', 'md'),
+        color: theme.text.neutral.primary,
+      },
+      sm: {
+        fontFamily: CDSprimitiveFontValues.family.interRegular,
+        fontSize: getVal('size', 'sm'),
+        lineHeight: getVal('lineHeight', 'xs'), // Usando xs ya que sm no estaba en tu lista
+        color: theme.text.neutral.primary,
+      },
+      xs: {
+        fontFamily: CDSprimitiveFontValues.family.interRegular,
+        fontSize: getVal('size', 'xs'),
+        lineHeight: getVal('lineHeight', 'xs'),
+        color: theme.text.neutral.primary,
+      },
+    },
+
+    bold: {
+      lg: {
+        fontFamily: CDSprimitiveFontValues.family.interBold,
+        fontSize: getVal('size', 'lg'),
+        lineHeight: getVal('lineHeight', 'lg'),
+        color: theme.text.neutral.primary,
+      },
+      md: {
+        fontFamily: CDSprimitiveFontValues.family.interBold,
+        fontSize: getVal('size', 'md'),
+        lineHeight: getVal('lineHeight', 'md'),
+        color: theme.text.neutral.primary,
+      },
+      sm: {
+        fontFamily: CDSprimitiveFontValues.family.interBold,
+        fontSize: getVal('size', 'sm'),
+        lineHeight: getVal('lineHeight', 'xs'),
+        color: theme.text.neutral.primary,
+      },
+      xs: {
+        fontFamily: CDSprimitiveFontValues.family.interBold,
+        fontSize: getVal('size', 'xs'),
+        lineHeight: getVal('lineHeight', 'xs'),
+        color: theme.text.neutral.primary,
+      },
+    },
+
+    semiBold: {
+      lg: {
+        fontFamily: CDSprimitiveFontValues.family.interSemiBold,
+        fontSize: getVal('size', 'lg'),
+        lineHeight: getVal('lineHeight', 'lg'),
+        color: theme.text.neutral.primary,
+      },
+      md: {
+        fontFamily: CDSprimitiveFontValues.family.interSemiBold,
+        fontSize: getVal('size', 'md'),
+        lineHeight: getVal('lineHeight', 'md'),
+        color: theme.text.neutral.primary,
+      },
+      sm: {
+        fontFamily: CDSprimitiveFontValues.family.interSemiBold,
+        fontSize: getVal('size', 'sm'),
+        lineHeight: getVal('lineHeight', 'sm'),
+        color: theme.text.neutral.primary,
+      },
+      xs: {
+        fontFamily: CDSprimitiveFontValues.family.interSemiBold,
+        fontSize: getVal('size', 'xs'),
+        lineHeight: getVal('lineHeight', 'xs'),
+        color: theme.text.neutral.primary,
+      },
+    },
+
+    label: {
+      fontFamily: CDSprimitiveFontValues.family.interSemiBold,
+      fontSize: getVal('size', 'sm'),
+      lineHeight: getVal('lineHeight', 'sm'),
+      color: theme.text.neutral.primary,
+    },
+
+    inputText: {
+      placeholder: {
+        fontFamily: CDSprimitiveFontValues.family.interRegular,
+        fontSize: getVal('size', 'sm'),
+        lineHeight: getVal('lineHeight', 'sm'),
+        color: theme.text.neutral.placeholder,
+      },
+      value: {
+        fontFamily: CDSprimitiveFontValues.family.interRegular,
+        fontSize: getVal('size', 'sm'),
+        lineHeight: getVal('lineHeight', 'sm'),
+        color: theme.text.neutral.primary,
+      },
+    },
+
+    link: {
+      regular: {
+        fontFamily: CDSprimitiveFontValues.family.interBold,
+        fontSize: getVal('size', 'md'),
+        lineHeight: getVal('lineHeight', 'md'),
+        color: theme.text.neutral.primary,
+        textDecorationLine: "underline",
+      },
+      small: {
+        fontFamily: CDSprimitiveFontValues.family.interBold,
+        fontSize: getVal('size', 'sm'),
+        lineHeight: getVal('lineHeight', 'sm'),
+        color: theme.text.neutral.primary,
+        textDecorationLine: "underline",
+      },
+    },
+
+    buttonText: {
+      fontFamily: CDSprimitiveFontValues.family.interBold,
+      fontSize: getVal('size', 'md'),
+      lineHeight: getVal('lineHeight', 'md'),
+    },
+
+    icon: {
+      xs: getVal('size', 'xs'),
+      sm: getVal('size', 'sm'),
+      md: getVal('size', 'md'),
+      lg: getVal('size', 'lg'),
+    },
+    highlightText: {
+      color: theme.text.brand.primary,
+    },
+    // h5: {
+    //   fontFamily: primitiveFontValues.family.interBold,
+    //   fontSize: isMobile ? primitiveFontValues.size.typography.mobile.md : primitiveFontValues.size.typography.desktop.md,
+    // },
+    // h6: {
+    //   fontFamily: primitiveFontValues.family.interBold,
+    //   fontSize: isMobile ? primitiveFontValues.size.typography.mobile.sm : primitiveFontValues.size.typography.desktop.sm,
+    // },
+  }
+}
 

package/assets/onboarding/slides.js

@@ -1,22 +0,0 @@
-// slides.js
-export const getSlides = (isDarkMode) => [
-  {
-    id: 'slide1',
-    title: "Tus boletas en un solo lugar",
-    description: "Conoce el estado general de tus boletas y dales seguimiento desde la aplicación.",
-    image: isDarkMode ? require("./image1D.png") : require("./image1.png")
-  },
-  {
-    id: 'slide2',
-    title: "Realiza tus pagos",
-    description: "Puedes refrendar o pagar tus desempeños con diferentes métodos de pago.",
-    image: isDarkMode ? require("./image2D.png") : require("./image2.png")
-  },
-  {
-    id: 'slide3',
-    title: "Tu eliges cuánto pagar",
-    description: "Puedes elegir la cantidad que deseas pagar en tus boletas.",
-    // Revisa que el uso de imágenes sea correcto según el modo:
-    image: isDarkMode ? require("./image3D.png") : require("./image3.png")
-  }
-];