@grupor5/raya 0.2.1 → 0.2.2

package/dist/tokens/index.mjs

@@ -0,0 +1,743 @@
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    100: "#faf9fb",
+    200: "#eeedf1",
+    300: "#dbd9e1",
+    400: "#c3c0cd",
+    500: "#a8a3b6",
+    600: "#8b859e",
+    700: "#706984",
+    800: "#585267",
+    900: "#423e4e",
+    1e3: "#312e3a",
+    1100: "#26242d",
+    1200: "#222028"
+  },
+  secondary: {
+    100: "#fbf7fc",
+    200: "#f2e4f6",
+    300: "#e4c7ed",
+    400: "#d3a2e1",
+    500: "#c07ad4",
+    600: "#ac50c7",
+    700: "#9037ab",
+    800: "#722b86",
+    900: "#592269",
+    1e3: "#481b55",
+    1100: "#42194e",
+    1200: "#1d0b23"
+  },
+  neutral: {
+    500: "#bdb3b3",
+    400: "#bdb3b3",
+    300: "#d2caca",
+    200: "#e7e2e2",
+    100: "#fbfafa",
+    10: "#ffffff",
+    20: "#f9f9f9",
+    30: "#f2f2f2"
+  },
+  red: {
+    600: "#dc2626",
+    500: "#ee4444",
+    400: "#e86e6e",
+    300: "#fca5a5",
+    200: "#e86e6e",
+    100: "#f3b7b7"
+  },
+  yellow: {
+    300: "#f59e0b",
+    200: "#f8be5c",
+    100: "#fcdfae",
+    10: "#fcdfaeB3"
+  },
+  green: {
+    600: "#096849",
+    500: "#10b981",
+    400: "#10b981",
+    300: "#10b981",
+    200: "#10b981",
+    100: "#D0FAE5",
+    10: "#beba6bB3"
+  }
+};
+
+// src/tokens/typography.ts
+var typography = {
+  fontFamily: {
+    primary: [
+      "Rubik",
+      "-apple-system",
+      "BlinkMacSystemFont",
+      "Segoe UI",
+      "Roboto",
+      "Oxygen",
+      "Ubuntu",
+      "Cantarell",
+      "sans-serif"
+    ]
+  },
+  fontWeight: {
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  },
+  fontSize: {
+    // Display Scale - Large typography for hero sections and prominent headers
+    display: {
+      l: "2.5rem"
+      // 40px - Display/L
+    },
+    // Heading Scale - Semantic headings with Bold weight
+    heading: {
+      xl: "2.25rem",
+      // 36px - Heading/XL
+      lg: "2rem",
+      // 32px - Heading/L  
+      md: "1.75rem",
+      // 28px - Heading/M
+      sm: "1.5rem"
+      // 24px - Heading/S
+    },
+    // Subheading Scale - Secondary headings with Bold weight
+    subheading: {
+      lg: "1.25rem",
+      // 20px - Subheading/L
+      md: "1.125rem",
+      // 18px - Subheading/M
+      sm: "1rem"
+      // 16px - Subheading/S
+    },
+    // Body Scale - Text content with Regular and Semi-bold variants
+    body: {
+      // Body Bold variants (Semi-bold weight)
+      "bold-lg": "1.125rem",
+      // 18px - Body/Bold/L
+      "bold-md": "1rem",
+      // 16px - Body/Bold/M
+      "bold-sm": "0.875rem",
+      // 14px - Body/Bold/S
+      "bold-xs": "0.75rem",
+      // 12px - Body/Bold/XS
+      // Body Regular variants
+      lg: "1.125rem",
+      // 18px - Body/L
+      md: "1rem",
+      // 16px - Body/M
+      sm: "0.875rem",
+      // 14px - Body/S
+      xs: "0.75rem"
+      // 12px - Body/XS
+    },
+    // Caption Scale - Small text for labels and metadata
+    caption: {
+      "c1": "0.75rem"
+      // 12px - Caption/C-1
+    }
+  },
+  lineHeight: {
+    // Display line heights
+    display: {
+      l: "3.25rem"
+      // 52px - Display/L
+    },
+    // Heading line heights
+    heading: {
+      xl: "2.75rem",
+      // 44px - Heading/XL
+      lg: "2.5rem",
+      // 40px - Heading/L
+      md: "2.25rem",
+      // 36px - Heading/M
+      sm: "2rem"
+      // 32px - Heading/S
+    },
+    // Subheading line heights
+    subheading: {
+      lg: "1.75rem",
+      // 28px - Subheading/L
+      md: "1.5rem",
+      // 24px - Subheading/M
+      sm: "1.25rem"
+      // 20px - Subheading/S
+    },
+    // Body line heights (same for both bold and regular)
+    body: {
+      lg: "1.75rem",
+      // 28px - Body/L & Body/Bold/L
+      md: "1.5rem",
+      // 24px - Body/M & Body/Bold/M
+      sm: "1.25rem",
+      // 20px - Body/S & Body/Bold/S
+      xs: "1.25rem"
+      // 20px - Body/XS & Body/Bold/XS
+    },
+    // Caption line heights
+    caption: {
+      c1: "1.125rem"
+      // 18px - Caption/C-1
+    }
+  },
+  // Letter spacing values
+  letterSpacing: {
+    normal: "0px",
+    // 0px - Default for most text
+    caption: "4px"
+    // 4px - Caption/C-1 specific
+  },
+  // Pre-composed typography styles for common use cases
+  presets: {
+    // Display presets
+    "display-l": {
+      fontSize: "2.5rem",
+      lineHeight: "3.25rem",
+      fontWeight: 700,
+      letterSpacing: "0px"
+    },
+    // Heading presets (all use Bold weight)
+    "heading-xl": {
+      fontSize: "2.25rem",
+      lineHeight: "2.75rem",
+      fontWeight: 700,
+      letterSpacing: "0px"
+    },
+    "heading-lg": {
+      fontSize: "2rem",
+      lineHeight: "2.5rem",
+      fontWeight: 700,
+      letterSpacing: "0px"
+    },
+    "heading-md": {
+      fontSize: "1.75rem",
+      lineHeight: "2.25rem",
+      fontWeight: 700,
+      letterSpacing: "0px"
+    },
+    "heading-sm": {
+      fontSize: "1.5rem",
+      lineHeight: "2rem",
+      fontWeight: 700,
+      letterSpacing: "0px"
+    },
+    // Subheading presets (all use Bold weight)
+    "subheading-lg": {
+      fontSize: "1.25rem",
+      lineHeight: "1.75rem",
+      fontWeight: 700,
+      letterSpacing: "0px"
+    },
+    "subheading-md": {
+      fontSize: "1.125rem",
+      lineHeight: "1.5rem",
+      fontWeight: 700,
+      letterSpacing: "0px"
+    },
+    "subheading-sm": {
+      fontSize: "1rem",
+      lineHeight: "1.25rem",
+      fontWeight: 700,
+      letterSpacing: "0px"
+    },
+    // Body Bold presets (Semi-bold weight)
+    "body-bold-lg": {
+      fontSize: "1.125rem",
+      lineHeight: "1.75rem",
+      fontWeight: 600,
+      letterSpacing: "0px"
+    },
+    "body-bold-md": {
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      fontWeight: 600,
+      letterSpacing: "0px"
+    },
+    "body-bold-sm": {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      fontWeight: 600,
+      letterSpacing: "0px"
+    },
+    "body-bold-xs": {
+      fontSize: "0.75rem",
+      lineHeight: "1.25rem",
+      fontWeight: 600,
+      letterSpacing: "0px"
+    },
+    // Body Regular presets
+    "body-lg": {
+      fontSize: "1.125rem",
+      lineHeight: "1.75rem",
+      fontWeight: 400,
+      letterSpacing: "0px"
+    },
+    "body-md": {
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+      fontWeight: 400,
+      letterSpacing: "0px"
+    },
+    "body-sm": {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+      fontWeight: 400,
+      letterSpacing: "0px"
+    },
+    "body-xs": {
+      fontSize: "0.75rem",
+      lineHeight: "1.25rem",
+      fontWeight: 400,
+      letterSpacing: "0px"
+    },
+    // Caption presets
+    "caption-c1": {
+      fontSize: "0.75rem",
+      lineHeight: "1.125rem",
+      fontWeight: 400,
+      letterSpacing: "4px"
+    }
+  }
+};
+var typographyVars = {
+  // Font family
+  "--font-primary": typography.fontFamily.primary.join(", "),
+  // Font weights
+  "--font-weight-light": typography.fontWeight.light,
+  "--font-weight-regular": typography.fontWeight.regular,
+  "--font-weight-medium": typography.fontWeight.medium,
+  "--font-weight-semibold": typography.fontWeight.semibold,
+  "--font-weight-bold": typography.fontWeight.bold,
+  // Display scale
+  "--text-display-l": typography.fontSize.display.l,
+  // Heading scale
+  "--text-heading-xl": typography.fontSize.heading.xl,
+  "--text-heading-lg": typography.fontSize.heading.lg,
+  "--text-heading-md": typography.fontSize.heading.md,
+  "--text-heading-sm": typography.fontSize.heading.sm,
+  // Subheading scale
+  "--text-subheading-lg": typography.fontSize.subheading.lg,
+  "--text-subheading-md": typography.fontSize.subheading.md,
+  "--text-subheading-sm": typography.fontSize.subheading.sm,
+  // Body scale
+  "--text-body-bold-lg": typography.fontSize.body["bold-lg"],
+  "--text-body-bold-md": typography.fontSize.body["bold-md"],
+  "--text-body-bold-sm": typography.fontSize.body["bold-sm"],
+  "--text-body-bold-xs": typography.fontSize.body["bold-xs"],
+  "--text-body-lg": typography.fontSize.body.lg,
+  "--text-body-md": typography.fontSize.body.md,
+  "--text-body-sm": typography.fontSize.body.sm,
+  "--text-body-xs": typography.fontSize.body.xs,
+  // Caption scale
+  "--text-caption-c1": typography.fontSize.caption.c1,
+  // Line heights
+  "--leading-display-l": typography.lineHeight.display.l,
+  "--leading-heading-xl": typography.lineHeight.heading.xl,
+  "--leading-heading-lg": typography.lineHeight.heading.lg,
+  "--leading-heading-md": typography.lineHeight.heading.md,
+  "--leading-heading-sm": typography.lineHeight.heading.sm,
+  "--leading-subheading-lg": typography.lineHeight.subheading.lg,
+  "--leading-subheading-md": typography.lineHeight.subheading.md,
+  "--leading-subheading-sm": typography.lineHeight.subheading.sm,
+  "--leading-body-lg": typography.lineHeight.body.lg,
+  "--leading-body-md": typography.lineHeight.body.md,
+  "--leading-body-sm": typography.lineHeight.body.sm,
+  "--leading-body-xs": typography.lineHeight.body.xs,
+  "--leading-caption-c1": typography.lineHeight.caption.c1,
+  // Letter spacing
+  "--tracking-normal": typography.letterSpacing.normal,
+  "--tracking-caption": typography.letterSpacing.caption
+};
+var generateTypographyCSS = () => {
+  return Object.entries(typographyVars).map(([property, value]) => `  ${property}: ${value};`).join("\n");
+};
+var { fontFamily, fontWeight, fontSize, lineHeight, letterSpacing, presets } = typography;
+
+// src/tokens/spacing.ts
+var spacing = {
+  // Base unit
+  base: "0.25rem",
+  // 4px
+  // Spacing scale
+  xs: "0.25rem",
+  // 4px - Minimal spacing, tight layouts
+  s: "0.5rem",
+  // 8px - Small gaps, compact components
+  m: "1rem",
+  // 16px - Default spacing, standard gaps
+  l: "1.5rem",
+  // 24px - Comfortable spacing, section gaps
+  xl: "2rem",
+  // 32px - Large spacing, major sections
+  "2xl": "2.5rem",
+  // 40px - Extra large spacing, page sections
+  "3xl": "3rem",
+  // 48px - Generous spacing, hero sections
+  "4xl": "3.5rem"
+  // 56px - Maximum spacing, major layouts
+};
+var spacingPx = {
+  base: 4,
+  xs: 4,
+  s: 8,
+  m: 16,
+  l: 24,
+  xl: 32,
+  "2xl": 40,
+  "3xl": 48,
+  "4xl": 56
+};
+var spacingStyles = {
+  // Component padding
+  buttonPadding: {
+    small: `${spacing.xs} ${spacing.s}`,
+    // 4px 8px
+    medium: `${spacing.s} ${spacing.m}`,
+    // 8px 16px
+    large: `${spacing.m} ${spacing.l}`
+    // 16px 24px
+  },
+  // Card spacing
+  cardPadding: {
+    compact: spacing.m,
+    // 16px
+    comfortable: spacing.l,
+    // 24px
+    spacious: spacing.xl
+    // 32px
+  },
+  // Form spacing
+  formSpacing: {
+    fieldGap: spacing.m,
+    // 16px between form fields
+    labelGap: spacing.xs,
+    // 4px between label and input
+    helpGap: spacing.xs
+    // 4px between input and help text
+  },
+  // Layout spacing
+  layoutSpacing: {
+    sectionGap: spacing["2xl"],
+    // 40px between major sections
+    componentGap: spacing.xl,
+    // 32px between components
+    elementGap: spacing.m
+    // 16px between elements
+  },
+  // Grid spacing
+  gridGap: {
+    tight: spacing.s,
+    // 8px
+    normal: spacing.m,
+    // 16px
+    comfortable: spacing.l,
+    // 24px
+    loose: spacing.xl
+    // 32px
+  }
+};
+var getSpacing = (token) => {
+  return spacing[token];
+};
+var getSpacingPx = (token) => {
+  return spacingPx[token];
+};
+var generateSpacingCSS = () => {
+  const cssVars = Object.entries(spacing).map(([key, value]) => `  --spacing-${key}: ${value};`).join("\n");
+  return `:root {
+  /* Spacing tokens */
+${cssVars}
+}`;
+};
+var tailwindSpacing = {
+  "xs": "var(--spacing-xs)",
+  "s": "var(--spacing-s)",
+  "m": "var(--spacing-m)",
+  "l": "var(--spacing-l)",
+  "xl": "var(--spacing-xl)",
+  "2xl": "var(--spacing-2xl)",
+  "3xl": "var(--spacing-3xl)",
+  "4xl": "var(--spacing-4xl)"
+};
+
+// src/tokens/stroke.ts
+var stroke = {
+  // Stroke widths
+  1: "1px",
+  2: "2px"
+};
+var strokeColors = {
+  default: "hsl(var(--border))",
+  muted: "hsl(var(--muted))",
+  primary: "hsl(var(--primary))",
+  secondary: "hsl(var(--secondary))",
+  destructive: "hsl(var(--destructive))",
+  focus: "hsl(var(--ring))",
+  transparent: "transparent"
+};
+var strokeStyles = {
+  // Default stroke styles
+  default: {
+    width: stroke[1],
+    color: strokeColors.default,
+    style: "solid"
+  },
+  emphasized: {
+    width: stroke[2],
+    color: strokeColors.default,
+    style: "solid"
+  },
+  // Interactive stroke styles
+  focus: {
+    width: stroke[2],
+    color: strokeColors.focus,
+    style: "solid"
+  },
+  hover: {
+    width: stroke[2],
+    color: strokeColors.primary,
+    style: "solid"
+  },
+  // Semantic stroke styles
+  primary: {
+    width: stroke[1],
+    color: strokeColors.primary,
+    style: "solid"
+  },
+  primaryEmphasized: {
+    width: stroke[2],
+    color: strokeColors.primary,
+    style: "solid"
+  },
+  destructive: {
+    width: stroke[1],
+    color: strokeColors.destructive,
+    style: "solid"
+  },
+  destructiveEmphasized: {
+    width: stroke[2],
+    color: strokeColors.destructive,
+    style: "solid"
+  },
+  // Utility stroke styles
+  muted: {
+    width: stroke[1],
+    color: strokeColors.muted,
+    style: "solid"
+  },
+  transparent: {
+    width: stroke[1],
+    color: strokeColors.transparent,
+    style: "solid"
+  }
+};
+var componentStrokes = {
+  // Button component strokes
+  button: {
+    outline: strokeStyles.primary,
+    outlineHover: strokeStyles.primaryEmphasized,
+    outlineFocus: strokeStyles.focus,
+    destructiveOutline: strokeStyles.destructive,
+    destructiveOutlineHover: strokeStyles.destructiveEmphasized
+  },
+  // Card component strokes
+  card: {
+    default: strokeStyles.default,
+    emphasized: strokeStyles.emphasized,
+    interactive: strokeStyles.default,
+    interactiveHover: strokeStyles.hover,
+    selected: strokeStyles.primaryEmphasized
+  },
+  // Form component strokes
+  form: {
+    input: strokeStyles.default,
+    inputFocus: strokeStyles.focus,
+    inputError: strokeStyles.destructive,
+    inputDisabled: strokeStyles.muted,
+    select: strokeStyles.default,
+    checkbox: strokeStyles.default,
+    checkboxChecked: strokeStyles.primary
+  },
+  // Navigation component strokes
+  navigation: {
+    divider: strokeStyles.default,
+    tabActive: strokeStyles.primaryEmphasized,
+    tabInactive: strokeStyles.transparent,
+    tabHover: strokeStyles.default
+  },
+  // Layout component strokes
+  layout: {
+    divider: strokeStyles.default,
+    section: strokeStyles.muted,
+    container: strokeStyles.default
+  }
+};
+var strokeDirections = {
+  all: "border",
+  top: "border-top",
+  right: "border-right",
+  bottom: "border-bottom",
+  left: "border-left",
+  horizontal: ["border-left", "border-right"],
+  vertical: ["border-top", "border-bottom"]
+};
+var getStroke = (token) => {
+  return stroke[token];
+};
+var getStrokeColor = (token) => {
+  return strokeColors[token];
+};
+var createStroke = (width, color = "default", style = "solid") => {
+  return `${stroke[width]} ${style} ${strokeColors[color]}`;
+};
+var generateStrokesCSS = () => {
+  const widthVars = Object.entries(stroke).map(([key, value]) => `  --stroke-${key}: ${value};`).join("\n");
+  const colorVars = Object.entries(strokeColors).map(([key, value]) => `  --stroke-color-${key}: ${value};`).join("\n");
+  return `:root {
+  /* Stroke width tokens */
+${widthVars}
+
+  /* Stroke color tokens */
+${colorVars}
+}`;
+};
+var tailwindStrokes = {
+  // Border widths
+  borderWidth: {
+    "stroke-1": "var(--stroke-1)",
+    "stroke-2": "var(--stroke-2)"
+  },
+  // Outline widths
+  outlineWidth: {
+    "stroke-1": "var(--stroke-1)",
+    "stroke-2": "var(--stroke-2)"
+  },
+  // Border colors (using existing design system colors)
+  borderColor: {
+    "stroke-default": "var(--stroke-color-default)",
+    "stroke-muted": "var(--stroke-color-muted)",
+    "stroke-primary": "var(--stroke-color-primary)",
+    "stroke-destructive": "var(--stroke-color-destructive)",
+    "stroke-focus": "var(--stroke-color-focus)"
+  }
+};
+var strokeTransitions = {
+  fast: "border-width 0.15s ease-in-out, border-color 0.15s ease-in-out",
+  medium: "border-width 0.2s ease-in-out, border-color 0.2s ease-in-out",
+  slow: "border-width 0.3s ease-in-out, border-color 0.3s ease-in-out",
+  colorOnly: "border-color 0.2s ease-in-out",
+  widthOnly: "border-width 0.2s ease-in-out"
+};
+var responsiveStrokes = {
+  mobile: {
+    default: stroke[1],
+    emphasized: stroke[1]
+    // Reduce emphasis on mobile
+  },
+  tablet: {
+    default: stroke[1],
+    emphasized: stroke[2]
+  },
+  desktop: {
+    default: stroke[1],
+    emphasized: stroke[2]
+  }
+};
+
+// src/tokens/badge.ts
+var badgeTokens = {
+  colors: {
+    inProgress: {
+      text: colors.secondary[600],
+      background: colors.secondary[200]
+    },
+    success: {
+      text: colors.green[600],
+      background: colors.green[100]
+    },
+    pending: {
+      text: colors.primary[700],
+      background: colors.primary[200]
+    },
+    danger: {
+      text: colors.neutral[10],
+      background: colors.red[400]
+    },
+    default: {
+      text: colors.secondary[1e3],
+      background: colors.secondary[1100],
+      textOnSolid: colors.secondary[200]
+    }
+  },
+  sizes: {
+    sm: "12px",
+    md: "14px",
+    lg: "16px"
+  },
+  padding: {
+    vertical: "4px",
+    horizontal: "12px"
+  },
+  icon: {
+    size: "16px"
+  }
+};
+
+// 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 { badgeTokens, colors, componentStrokes, createStroke, fontFamily, fontSize, fontWeight, generateSpacingCSS, generateStrokesCSS, generateTypographyCSS, getSpacing, getSpacingPx, getStroke, getStrokeColor, letterSpacing, lineHeight, presets, responsiveStrokes, spacing, spacingPx, spacingStyles, stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tagTokens, tailwindSpacing, tailwindStrokes, typography, typographyVars };