@grupor5/raya 0.2.1 → 0.2.2

package/dist/tokens/tag.js

@@ -0,0 +1,80 @@
+'use strict';
+
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    200: "#eeedf1",
+    300: "#dbd9e1",
+    700: "#706984",
+    900: "#423e4e",
+    1200: "#222028"
+  },
+  red: {
+    600: "#dc2626",
+    100: "#f3b7b7"
+  },
+  yellow: {
+    300: "#f59e0b",
+    100: "#fcdfae"},
+  green: {
+    600: "#096849",
+    100: "#D0FAE5"}
+};
+
+// src/tokens/tag.ts
+var tagTokens = {
+  colors: {
+    default: {
+      background: colors.primary[200],
+      text: colors.primary[900],
+      bullet: colors.primary[1200],
+      closeIconBorder: colors.primary[300],
+      hover: {
+        background: colors.primary[300],
+        closeIconBorder: colors.primary[700]
+      }
+    },
+    success: {
+      background: colors.green[100],
+      text: colors.green[600],
+      bullet: colors.green[600],
+      closeIconBorder: colors.green[600],
+      hover: {
+        background: "#a7f3d0",
+        // Valor cercano a un "green-200"
+        closeIconBorder: colors.green[600]
+      }
+    },
+    warning: {
+      background: colors.yellow[100],
+      text: colors.yellow[300],
+      bullet: colors.yellow[300],
+      closeIconBorder: colors.yellow[300],
+      hover: {
+        background: "#fde68a",
+        // Valor cercano a un "yellow-200"
+        closeIconBorder: colors.yellow[300]
+      }
+    },
+    danger: {
+      background: colors.red[100],
+      text: colors.red[600],
+      bullet: colors.red[600],
+      closeIconBorder: colors.red[600],
+      hover: {
+        background: "#fecaca",
+        // Valor cercano a un "red-200"
+        closeIconBorder: colors.red[600]
+      }
+    }
+  },
+  fontSize: "12px",
+  padding: {
+    x: "8px",
+    y: "0px"
+  },
+  borderRadius: "6px",
+  iconSize: "12px"
+};
+
+exports.tagTokens = tagTokens;

package/dist/tokens/tag.mjs

@@ -0,0 +1,78 @@
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    200: "#eeedf1",
+    300: "#dbd9e1",
+    700: "#706984",
+    900: "#423e4e",
+    1200: "#222028"
+  },
+  red: {
+    600: "#dc2626",
+    100: "#f3b7b7"
+  },
+  yellow: {
+    300: "#f59e0b",
+    100: "#fcdfae"},
+  green: {
+    600: "#096849",
+    100: "#D0FAE5"}
+};
+
+// src/tokens/tag.ts
+var tagTokens = {
+  colors: {
+    default: {
+      background: colors.primary[200],
+      text: colors.primary[900],
+      bullet: colors.primary[1200],
+      closeIconBorder: colors.primary[300],
+      hover: {
+        background: colors.primary[300],
+        closeIconBorder: colors.primary[700]
+      }
+    },
+    success: {
+      background: colors.green[100],
+      text: colors.green[600],
+      bullet: colors.green[600],
+      closeIconBorder: colors.green[600],
+      hover: {
+        background: "#a7f3d0",
+        // Valor cercano a un "green-200"
+        closeIconBorder: colors.green[600]
+      }
+    },
+    warning: {
+      background: colors.yellow[100],
+      text: colors.yellow[300],
+      bullet: colors.yellow[300],
+      closeIconBorder: colors.yellow[300],
+      hover: {
+        background: "#fde68a",
+        // Valor cercano a un "yellow-200"
+        closeIconBorder: colors.yellow[300]
+      }
+    },
+    danger: {
+      background: colors.red[100],
+      text: colors.red[600],
+      bullet: colors.red[600],
+      closeIconBorder: colors.red[600],
+      hover: {
+        background: "#fecaca",
+        // Valor cercano a un "red-200"
+        closeIconBorder: colors.red[600]
+      }
+    }
+  },
+  fontSize: "12px",
+  padding: {
+    x: "8px",
+    y: "0px"
+  },
+  borderRadius: "6px",
+  iconSize: "12px"
+};
+
+export { tagTokens };

package/dist/tokens/typography.d.mts

@@ -0,0 +1,394 @@
+/**
+ * Raya Design System - Typography Tokens
+ * Font Family: Rubik
+ * Based on the official Raya typography system palette from Figma
+ */
+declare const typography: {
+    fontFamily: {
+        primary: string[];
+    };
+    fontWeight: {
+        light: number;
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+    fontSize: {
+        display: {
+            l: string;
+        };
+        heading: {
+            xl: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        subheading: {
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        body: {
+            'bold-lg': string;
+            'bold-md': string;
+            'bold-sm': string;
+            'bold-xs': string;
+            lg: string;
+            md: string;
+            sm: string;
+            xs: string;
+        };
+        caption: {
+            c1: string;
+        };
+    };
+    lineHeight: {
+        display: {
+            l: string;
+        };
+        heading: {
+            xl: string;
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        subheading: {
+            lg: string;
+            md: string;
+            sm: string;
+        };
+        body: {
+            lg: string;
+            md: string;
+            sm: string;
+            xs: string;
+        };
+        caption: {
+            c1: string;
+        };
+    };
+    letterSpacing: {
+        normal: string;
+        caption: string;
+    };
+    presets: {
+        'display-l': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'heading-xl': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'heading-lg': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'heading-md': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'heading-sm': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'subheading-lg': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'subheading-md': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'subheading-sm': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'body-bold-lg': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'body-bold-md': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'body-bold-sm': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'body-bold-xs': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'body-lg': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'body-md': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'body-sm': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'body-xs': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+        'caption-c1': {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            letterSpacing: string;
+        };
+    };
+};
+declare const typographyVars: {
+    '--font-primary': string;
+    '--font-weight-light': number;
+    '--font-weight-regular': number;
+    '--font-weight-medium': number;
+    '--font-weight-semibold': number;
+    '--font-weight-bold': number;
+    '--text-display-l': string;
+    '--text-heading-xl': string;
+    '--text-heading-lg': string;
+    '--text-heading-md': string;
+    '--text-heading-sm': string;
+    '--text-subheading-lg': string;
+    '--text-subheading-md': string;
+    '--text-subheading-sm': string;
+    '--text-body-bold-lg': string;
+    '--text-body-bold-md': string;
+    '--text-body-bold-sm': string;
+    '--text-body-bold-xs': string;
+    '--text-body-lg': string;
+    '--text-body-md': string;
+    '--text-body-sm': string;
+    '--text-body-xs': string;
+    '--text-caption-c1': string;
+    '--leading-display-l': string;
+    '--leading-heading-xl': string;
+    '--leading-heading-lg': string;
+    '--leading-heading-md': string;
+    '--leading-heading-sm': string;
+    '--leading-subheading-lg': string;
+    '--leading-subheading-md': string;
+    '--leading-subheading-sm': string;
+    '--leading-body-lg': string;
+    '--leading-body-md': string;
+    '--leading-body-sm': string;
+    '--leading-body-xs': string;
+    '--leading-caption-c1': string;
+    '--tracking-normal': string;
+    '--tracking-caption': string;
+};
+declare const generateTypographyCSS: () => string;
+declare const fontFamily: {
+    primary: string[];
+};
+declare const fontWeight: {
+    light: number;
+    regular: number;
+    medium: number;
+    semibold: number;
+    bold: number;
+};
+declare const fontSize: {
+    display: {
+        l: string;
+    };
+    heading: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    subheading: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    body: {
+        'bold-lg': string;
+        'bold-md': string;
+        'bold-sm': string;
+        'bold-xs': string;
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+    };
+    caption: {
+        c1: string;
+    };
+};
+declare const lineHeight: {
+    display: {
+        l: string;
+    };
+    heading: {
+        xl: string;
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    subheading: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    body: {
+        lg: string;
+        md: string;
+        sm: string;
+        xs: string;
+    };
+    caption: {
+        c1: string;
+    };
+};
+declare const letterSpacing: {
+    normal: string;
+    caption: string;
+};
+declare const presets: {
+    'display-l': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'heading-xl': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'heading-lg': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'heading-md': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'heading-sm': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'subheading-lg': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'subheading-md': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'subheading-sm': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'body-bold-lg': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'body-bold-md': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'body-bold-sm': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'body-bold-xs': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'body-lg': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'body-md': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'body-sm': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'body-xs': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+    'caption-c1': {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: number;
+        letterSpacing: string;
+    };
+};
+
+export { fontFamily, fontSize, fontWeight, generateTypographyCSS, letterSpacing, lineHeight, presets, typography, typographyVars };