@grupor5/raya 0.2.1 → 0.2.2

package/dist/tokens/typography.d.ts

@@ -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 };

package/dist/tokens/typography.js

@@ -0,0 +1,302 @@
+'use strict';
+
+// 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;
+
+exports.fontFamily = fontFamily;
+exports.fontSize = fontSize;
+exports.fontWeight = fontWeight;
+exports.generateTypographyCSS = generateTypographyCSS;
+exports.letterSpacing = letterSpacing;
+exports.lineHeight = lineHeight;
+exports.presets = presets;
+exports.typography = typography;
+exports.typographyVars = typographyVars;