@grupor5/raya 0.1.0

package/src/tokens/grids.ts

@@ -0,0 +1,342 @@
+/**
+ * Raya Design System - Grid Tokens
+ * 
+ * Grid system tokens for responsive layout design with consistent
+ * breakpoints, columns, margins, and gutters across all devices.
+ */
+
+/**
+ * Breakpoint definitions
+ */
+export const breakpoints = {
+  mobile: '0px',
+  tablet: '768px',
+  desktop: '1024px',
+} as const;
+
+/**
+ * Grid specifications for each breakpoint
+ */
+export const gridSpecs = {
+  mobile: {
+    columns: 4,
+    margin: '16px',
+    gutter: '16px',
+    breakpoint: breakpoints.mobile,
+    maxWidth: '767px',
+  },
+  tablet: {
+    columns: 8,
+    margin: '20px',
+    gutter: '20px',
+    breakpoint: breakpoints.tablet,
+    maxWidth: '1023px',
+  },
+  desktop: {
+    columns: 12,
+    margin: '24px',
+    gutter: '24px',
+    breakpoint: breakpoints.desktop,
+    maxWidth: 'none',
+  },
+} as const;
+
+/**
+ * Column span utilities for each breakpoint
+ */
+export const columnSpans = {
+  mobile: {
+    1: '25%',        // 1/4
+    2: '50%',        // 2/4
+    3: '75%',        // 3/4
+    4: '100%',       // 4/4 (full width)
+  },
+  tablet: {
+    1: '12.5%',      // 1/8
+    2: '25%',        // 2/8
+    3: '37.5%',      // 3/8
+    4: '50%',        // 4/8
+    5: '62.5%',      // 5/8
+    6: '75%',        // 6/8
+    7: '87.5%',      // 7/8
+    8: '100%',       // 8/8 (full width)
+  },
+  desktop: {
+    1: '8.333333%',  // 1/12
+    2: '16.666667%', // 2/12
+    3: '25%',        // 3/12
+    4: '33.333333%', // 4/12
+    5: '41.666667%', // 5/12
+    6: '50%',        // 6/12
+    7: '58.333333%', // 7/12
+    8: '66.666667%', // 8/12
+    9: '75%',        // 9/12
+    10: '83.333333%',// 10/12
+    11: '91.666667%',// 11/12
+    12: '100%',      // 12/12 (full width)
+  },
+} as const;
+
+/**
+ * Grid container styles
+ */
+export const gridContainer = {
+  display: 'grid',
+  width: '100%',
+  boxSizing: 'border-box',
+} as const;
+
+/**
+ * Responsive grid configurations
+ */
+export const responsiveGrid = {
+  mobile: {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${gridSpecs.mobile.columns}, 1fr)`,
+    gap: gridSpecs.mobile.gutter,
+    margin: `0 ${gridSpecs.mobile.margin}`,
+    boxSizing: 'border-box',
+  },
+  tablet: {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${gridSpecs.tablet.columns}, 1fr)`,
+    gap: gridSpecs.tablet.gutter,
+    margin: `0 ${gridSpecs.tablet.margin}`,
+    boxSizing: 'border-box',
+  },
+  desktop: {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${gridSpecs.desktop.columns}, 1fr)`,
+    gap: gridSpecs.desktop.gutter,
+    margin: `0 ${gridSpecs.desktop.margin}`,
+    boxSizing: 'border-box',
+  },
+} as const;
+
+/**
+ * Flexbox grid fallback configurations
+ */
+export const flexboxGrid = {
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    width: '100%',
+    boxSizing: 'border-box',
+  },
+  item: {
+    boxSizing: 'border-box',
+    flex: '0 0 auto',
+  },
+} as const;
+
+/**
+ * Common layout patterns
+ */
+export const layoutPatterns = {
+  // Hero section (full width)
+  hero: {
+    mobile: { gridColumn: '1 / -1' },
+    tablet: { gridColumn: '1 / -1' },
+    desktop: { gridColumn: '1 / -1' },
+  },
+  
+  // Content + Sidebar
+  contentSidebar: {
+    content: {
+      mobile: { gridColumn: '1 / -1' },
+      tablet: { gridColumn: '1 / 7' },
+      desktop: { gridColumn: '1 / 9' },
+    },
+    sidebar: {
+      mobile: { gridColumn: '1 / -1' },
+      tablet: { gridColumn: '7 / -1' },
+      desktop: { gridColumn: '9 / -1' },
+    },
+  },
+  
+  // Three column layout
+  threeColumn: {
+    mobile: { gridColumn: '1 / -1' },
+    tablet: {
+      first: { gridColumn: 'span 2' },
+      others: { gridColumn: 'span 3' },
+    },
+    desktop: { gridColumn: 'span 4' },
+  },
+  
+  // Two column layout
+  twoColumn: {
+    mobile: { gridColumn: '1 / -1' },
+    tablet: { gridColumn: 'span 4' },
+    desktop: { gridColumn: 'span 6' },
+  },
+  
+  // Four column layout
+  fourColumn: {
+    mobile: { gridColumn: 'span 2' },
+    tablet: { gridColumn: 'span 2' },
+    desktop: { gridColumn: 'span 3' },
+  },
+} as const;
+
+/**
+ * Grid utilities for common use cases
+ */
+export const gridUtils = {
+  // Full width utilities
+  fullWidth: {
+    mobile: 'col-span-4',
+    tablet: 'col-span-8',
+    desktop: 'col-span-12',
+  },
+  
+  // Half width utilities
+  halfWidth: {
+    mobile: 'col-span-2',
+    tablet: 'col-span-4',
+    desktop: 'col-span-6',
+  },
+  
+  // Third width utilities
+  thirdWidth: {
+    mobile: 'col-span-4', // Stack on mobile
+    tablet: 'col-span-3',
+    desktop: 'col-span-4',
+  },
+  
+  // Quarter width utilities
+  quarterWidth: {
+    mobile: 'col-span-2',
+    tablet: 'col-span-2',
+    desktop: 'col-span-3',
+  },
+} as const;
+
+/**
+ * Grid gap utilities aligned with spacing system
+ */
+export const gridGaps = {
+  xs: '4px',   // spacing-xs
+  s: '8px',    // spacing-s
+  m: '16px',   // spacing-m
+  l: '24px',   // spacing-l
+  xl: '32px',  // spacing-xl
+} as const;
+
+/**
+ * Container max-widths for different layouts
+ */
+export const containerSizes = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+  full: '100%',
+} as const;
+
+/**
+ * Grid system type definitions
+ */
+export type Breakpoint = keyof typeof breakpoints;
+export type GridSpec = typeof gridSpecs[Breakpoint];
+export type ColumnSpan = keyof typeof columnSpans.desktop;
+export type GridGap = keyof typeof gridGaps;
+export type ContainerSize = keyof typeof containerSizes;
+
+/**
+ * Pre-composed grid styles for common components
+ */
+export const componentGrids = {
+  // Card grid layouts
+  cardGrid: {
+    mobile: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(1, 1fr)',
+      gap: gridGaps.m,
+    },
+    tablet: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gap: gridGaps.l,
+    },
+    desktop: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(3, 1fr)',
+      gap: gridGaps.l,
+    },
+  },
+  
+  // Dashboard layout
+  dashboard: {
+    mobile: {
+      display: 'grid',
+      gridTemplateColumns: '1fr',
+      gap: gridGaps.m,
+    },
+    tablet: {
+      display: 'grid',
+      gridTemplateColumns: '200px 1fr',
+      gap: gridGaps.l,
+    },
+    desktop: {
+      display: 'grid',
+      gridTemplateColumns: '250px 1fr',
+      gap: gridGaps.xl,
+    },
+  },
+  
+  // Form layout
+  form: {
+    mobile: {
+      display: 'grid',
+      gridTemplateColumns: '1fr',
+      gap: gridGaps.m,
+    },
+    tablet: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gap: gridGaps.m,
+    },
+    desktop: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      gap: gridGaps.l,
+    },
+  },
+} as const;
+
+/**
+ * Utility functions for grid calculations
+ */
+export const gridCalculations = {
+  /**
+   * Calculate column width based on container width
+   */
+  calculateColumnWidth: (
+    containerWidth: number,
+    columns: number,
+    margin: number,
+    gutter: number
+  ): number => {
+    return (containerWidth - (2 * margin) - ((columns - 1) * gutter)) / columns;
+  },
+  
+  /**
+   * Get responsive column span classes
+   */
+  getResponsiveSpan: (
+    mobile: number,
+    tablet: number,
+    desktop: number
+  ): string => {
+    return `col-span-${mobile} md:col-span-${tablet} lg:col-span-${desktop}`;
+  },
+  
+  /**
+   * Generate grid template columns string
+   */
+  generateGridColumns: (columns: number): string => {
+    return `repeat(${columns}, 1fr)`;
+  },
+} as const;