cdslibrary 1.0.56 → 1.1.3

package/tokens/CDSprimitiveTokens.js

@@ -70,7 +70,8 @@ export const CDSprimitiveColors = {
     900: "#3D292C",
     950: "#382E2F",
   },
-  overlay: {light:"rgba(0, 0, 0, 0.50)",
+  overlay: {
+    light: "rgba(0, 0, 0, 0.50)",
     dark: 'rgba(0,0,0,0.75)'
   },
 };
@@ -79,7 +80,7 @@ export const CDSprimitiveColors = {
 
 
 export const CDSprimitiveFontValues = {
-  
+
   family: {
     interRegular: 'Inter_400Regular',
     interSemiBold: 'Inter_600SemiBold',
@@ -125,8 +126,7 @@ export const CDSprimitiveFontValues = {
 
   lineHeight: {
     mobile: {
-      xs: 18,
-      sm: 20,
+      sm: 18,
       md: 24,
       lg: 28,
       xl: 31,
@@ -134,8 +134,7 @@ export const CDSprimitiveFontValues = {
       "3xl": 44,
     },
     desktop: {
-      xs: 18,
-      sm: 22,
+      sm: 18,
       md: 28,
       lg: 35,
       xl: 43,
@@ -144,3 +143,62 @@ export const CDSprimitiveFontValues = {
     },
   },
 };
+
+export const CDSPrimiviteRadius = {
+  none: 0,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  full: 9999,
+};
+
+export const CDSPrimitiveSpacing =
+{
+  none: { mobile: 0, desktop: 0 },
+  xs: { mobile: 8, desktop: 16 },
+  sm: { mobile: 16, desktop: 24 },
+  md: { mobile: 24, desktop: 32 },
+  lg: { mobile: 32, desktop: 48 },
+  xl: { mobile: 48, desktop: 64 },
+};
+
+export const CDSPrimitiveShadows = (mode) => ({
+  md: {
+    shadowColor: CDSprimitiveColors.neutral[1000],
+    shadowOffset: { 
+      width: 0, 
+      height: mode==='dark' ? 8 : 2 
+    },
+    shadowOpacity: mode==='dark' ? 0.4 : 0.1,
+    shadowRadius: 6,
+    elevation: 3, // Valor aproximado para Android
+  },
+  
+  // Basado en tu captura "lg": Y: 4, Blur: 8
+  lg: {
+    shadowColor: CDSprimitiveColors.neutral[1000],
+    shadowOffset: { 
+      width: 0, 
+      height: mode==='dark' ? 10 : 4
+    },
+    shadowOpacity: mode==='dark' ? 0.5 : 0.1,
+    shadowRadius: 8,
+    elevation: 5, // Valor aproximado para Android
+  },
+});
+
+export const resolveTokens = (primitives, isMobile) => {
+  const resolved = {};
+  
+  for (const key in primitives) {
+    const value = primitives[key];
+    // Si el valor tiene la estructura { mobile, desktop }, elegimos uno
+    if (value && typeof value === 'object' && 'mobile' in value) {
+      resolved[key] = isMobile ? value.mobile : value.desktop;
+    } else {
+      // Si es un valor simple (como un color o radius), se queda igual
+      resolved[key] = value;
+    }
+  }
+  return resolved;
+};

package/tokens/CDSsemanticColors.js

@@ -1,11 +1,9 @@
 import { CDSprimitiveColors } from "./CDSprimitiveTokens";
-import { Dimensions, Platform } from "react-native";
-const { width } = Dimensions.get("window");
 
 export const CDSsemanticColors = {
   light: {
-    logo:{
-      source:"../assets/logoMonte.png"
+    logo: {
+      source: "../assets/logoMonte.png"
     },
     icon: {
       neutral: {
@@ -30,7 +28,7 @@ export const CDSsemanticColors = {
       action: {
         disabled: CDSprimitiveColors.neutral[400],
         primary: CDSprimitiveColors.neutral[800],
-        pressed: CDSprimitiveColors.neutral[200],
+        pressed: CDSprimitiveColors.neutral[1000],
       },
       feedback: {
         info: CDSprimitiveColors.blue[100],
@@ -106,10 +104,11 @@ export const CDSsemanticColors = {
         error: CDSprimitiveColors.scarlet[300],
       },
     },
+    overlay: CDSprimitiveColors.overlay.light,
   },
   dark: {
-    logo:{
-      source:'../assets/logoMonteW.png'
+    logo: {
+      source: '../assets/logoMonteW.png'
     },
     icon: {
       neutral: {
@@ -134,6 +133,7 @@ export const CDSsemanticColors = {
       action: {
         disabled: CDSprimitiveColors.neutral[600],
         primary: CDSprimitiveColors.neutral[200],
+        pressed: CDSprimitiveColors.neutral[100],
       },
       feedback: {
         info: CDSprimitiveColors.blue[250],
@@ -209,5 +209,6 @@ export const CDSsemanticColors = {
         error: CDSprimitiveColors.scarlet[350],
       },
     },
+    overlay: CDSprimitiveColors.overlay.dark,
   },
 };

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")
-  }
-];