@empline/preflight 1.0.20

package/dist/shared/design-tokens.js

@@ -0,0 +1,873 @@
+"use strict";
+/**
+ * Design Tokens - Shared Constants for Preflight Checks
+ *
+ * Single source of truth for spacing, gaps, colors, and other design values.
+ * These values should match your app's Tailwind config and CSS variables.
+ *
+ * IMPORTANT: When integrating a new app, update these values to match
+ * the app's design system. The preflight checks will use these values
+ * to validate consistency.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TABLE_ROW_HEIGHTS = exports.TABLE_PADDING = exports.SKELETON_HEIGHTS = exports.SKELETON_ANIMATION = exports.MODAL_SIZES = exports.CHIP_SIZES = exports.BADGE_SIZES = exports.AVATAR_SIZES = exports.TRACKING_CLASSES = exports.LETTER_SPACING = exports.FONT_WEIGHT_VARS = exports.FONT_WEIGHTS = exports.BORDER_WIDTHS = exports.TEXT_TO_ICON_SIZE = exports.GRID_CONFIGS = exports.HEADER_HEIGHTS = exports.COMPONENT_HEIGHTS = exports.EASING_CLASSES = exports.EASINGS = exports.FOCUS_RING = exports.BORDER_RADIUS = exports.DURATIONS = exports.Z_INDEX = exports.LINE_HEIGHTS = exports.ICON_SIZES = exports.BREAKPOINTS = exports.VIEWPORTS = exports.CONTRAST_RATIOS = exports.TOUCH_TARGETS = exports.ALLOWED_HARDCODED_COLORS = exports.COLORS = exports.LINE_CLAMP = exports.DISABLED_STANDARDS = exports.SECTION_SPACING = exports.CARD_CSS = exports.CARD_STANDARDS = exports.MIN_DISABLED_OPACITY = exports.OPACITY = exports.ASPECT_RATIOS = exports.MAX_WIDTHS = exports.SHADOW_CLASSES = exports.SHADOWS = exports.FONT_SIZES_PX = exports.FONT_SIZES = exports.CSS_SPACING_PATTERN = exports.CSS_VARS = exports.GAPS_PX = exports.GAPS = exports.SPACING_SCALE = void 0;
+exports.spacingToPx = spacingToPx;
+exports.pxToSpacing = pxToSpacing;
+// =============================================================================
+// SPACING SCALE (Tailwind-based)
+// =============================================================================
+/**
+ * Tailwind spacing scale in pixels
+ * Maps Tailwind spacing units (1, 2, 3, etc.) to pixel values
+ */
+exports.SPACING_SCALE = {
+    0: 0,
+    0.5: 2,
+    1: 4,
+    1.5: 6,
+    2: 8,
+    2.5: 10,
+    3: 12,
+    3.5: 14,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 36,
+    10: 40,
+    11: 44,
+    12: 48,
+    14: 56,
+    16: 64,
+    20: 80,
+    24: 96,
+    28: 112,
+    32: 128,
+};
+/**
+ * Get pixel value for a Tailwind spacing unit
+ */
+function spacingToPx(unit) {
+    return exports.SPACING_SCALE[unit];
+}
+/**
+ * Get Tailwind spacing unit from pixel value
+ */
+function pxToSpacing(px) {
+    const entry = Object.entries(exports.SPACING_SCALE).find(([, value]) => value === px);
+    return entry ? parseFloat(entry[0]) : null;
+}
+// =============================================================================
+// GAP VALUES
+// =============================================================================
+/**
+ * Standard gap values for different UI patterns
+ * These are Tailwind gap units (gap-2, gap-3, etc.)
+ */
+exports.GAPS = {
+    /** Tight icon-text spacing (8px) - use for compact UI */
+    iconTextTight: 2,
+    /** Standard icon-text spacing (12px) - default for icons next to text */
+    iconText: 3,
+    /** Button group spacing (12px) - between buttons in a row */
+    buttonGroup: 3,
+    /** Form field spacing (16px) - between form inputs */
+    formField: 4,
+    /** Layout content gap (12px) - inside page layouts */
+    layoutContent: 3,
+    /** Card grid gap (24px) - between cards in a grid */
+    cardGrid: 6,
+    /** Stat box gap (32px) - between stat/metric boxes */
+    statBox: 8,
+    /** Section gap (24px) - between major page sections */
+    section: 6,
+    /** Mobile minimum gap (8px) - minimum gap on mobile viewports */
+    mobileMin: 2,
+    /** Mobile recommended gap (16px) - recommended gap on mobile */
+    mobileRecommended: 4,
+};
+/**
+ * Gap values in pixels (for reference)
+ */
+exports.GAPS_PX = {
+    iconTextTight: exports.SPACING_SCALE[exports.GAPS.iconTextTight],
+    iconText: exports.SPACING_SCALE[exports.GAPS.iconText],
+    buttonGroup: exports.SPACING_SCALE[exports.GAPS.buttonGroup],
+    formField: exports.SPACING_SCALE[exports.GAPS.formField],
+    layoutContent: exports.SPACING_SCALE[exports.GAPS.layoutContent],
+    cardGrid: exports.SPACING_SCALE[exports.GAPS.cardGrid],
+    statBox: exports.SPACING_SCALE[exports.GAPS.statBox],
+    section: exports.SPACING_SCALE[exports.GAPS.section],
+    mobileMin: exports.SPACING_SCALE[exports.GAPS.mobileMin],
+    mobileRecommended: exports.SPACING_SCALE[exports.GAPS.mobileRecommended],
+};
+// =============================================================================
+// CSS VARIABLE MAPPINGS
+// =============================================================================
+/**
+ * CSS variable names for spacing
+ * Use these in style={{ gap: "var(--spacing-3)" }}
+ */
+exports.CSS_VARS = {
+    spacing: (unit) => `var(--spacing-${unit})`,
+};
+/**
+ * Valid CSS spacing variable pattern
+ */
+exports.CSS_SPACING_PATTERN = /var\(--spacing-(\d+)\)/;
+// =============================================================================
+// FONT SIZES (Tailwind scale)
+// =============================================================================
+/**
+ * Tailwind font size scale
+ * Maps text-xs, text-sm, etc. to pixel and rem values
+ */
+exports.FONT_SIZES = {
+    xs: { px: 12, rem: "0.75rem" },
+    sm: { px: 14, rem: "0.875rem" },
+    base: { px: 16, rem: "1rem" },
+    lg: { px: 18, rem: "1.125rem" },
+    xl: { px: 20, rem: "1.25rem" },
+    "2xl": { px: 24, rem: "1.5rem" },
+    "3xl": { px: 30, rem: "1.875rem" },
+    "4xl": { px: 36, rem: "2.25rem" },
+    "5xl": { px: 48, rem: "3rem" },
+    "6xl": { px: 60, rem: "3.75rem" },
+    "7xl": { px: 72, rem: "4.5rem" },
+    "8xl": { px: 96, rem: "6rem" },
+    "9xl": { px: 128, rem: "8rem" },
+};
+/**
+ * Font size pixel values only (for comparisons)
+ */
+exports.FONT_SIZES_PX = {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    "2xl": 24,
+    "3xl": 30,
+    "4xl": 36,
+    "5xl": 48,
+    "6xl": 60,
+    "7xl": 72,
+    "8xl": 96,
+    "9xl": 128,
+};
+// =============================================================================
+// SHADOWS
+// =============================================================================
+/**
+ * Shadow scale matching Tailwind defaults
+ * Use CSS variables: var(--shadow-sm), var(--shadow-md), etc.
+ */
+exports.SHADOWS = {
+    none: "none",
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    default: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+};
+/**
+ * Valid shadow class names
+ */
+exports.SHADOW_CLASSES = ["shadow-sm", "shadow", "shadow-md", "shadow-lg", "shadow-xl", "shadow-2xl", "shadow-inner", "shadow-none"];
+// =============================================================================
+// MAX WIDTHS (Container sizes)
+// =============================================================================
+/**
+ * Tailwind max-width scale in pixels
+ */
+exports.MAX_WIDTHS = {
+    xs: 320,
+    sm: 384,
+    md: 448,
+    lg: 512,
+    xl: 576,
+    "2xl": 672,
+    "3xl": 768,
+    "4xl": 896,
+    "5xl": 1024,
+    "6xl": 1152,
+    "7xl": 1280,
+    full: "100%",
+    prose: 65, // ch units
+    screen: {
+        sm: 640,
+        md: 768,
+        lg: 1024,
+        xl: 1280,
+        "2xl": 1536,
+    },
+};
+// =============================================================================
+// ASPECT RATIOS
+// =============================================================================
+/**
+ * Common aspect ratios
+ */
+exports.ASPECT_RATIOS = {
+    square: 1,
+    video: 16 / 9,
+    photo: 4 / 3,
+    portrait: 3 / 4,
+    wide: 21 / 9,
+    ultrawide: 32 / 9,
+};
+// =============================================================================
+// OPACITY VALUES
+// =============================================================================
+/**
+ * Standard opacity values for UI states
+ */
+exports.OPACITY = {
+    /** Invisible */
+    transparent: 0,
+    /** Very subtle background */
+    subtle: 0.05,
+    /** Disabled state minimum (WCAG compliant) */
+    disabled: 0.5,
+    /** Hover overlay */
+    hover: 0.1,
+    /** Active/pressed overlay */
+    active: 0.2,
+    /** Semi-transparent backgrounds */
+    semiTransparent: 0.75,
+    /** Nearly opaque */
+    nearlyOpaque: 0.95,
+    /** Fully visible */
+    opaque: 1,
+};
+/**
+ * Minimum opacity for disabled elements (WCAG 2.1 AA)
+ */
+exports.MIN_DISABLED_OPACITY = 0.5;
+// =============================================================================
+// CARD STANDARDS
+// =============================================================================
+/**
+ * Standard card styling values
+ * Use these to ensure consistent card appearance
+ */
+exports.CARD_STANDARDS = {
+    /** Standard inner padding (p-6 = 24px) */
+    padding: 6,
+    paddingPx: 24,
+    /** Standard border radius (rounded-xl = 12px) */
+    radius: "xl",
+    radiusPx: 12,
+    /** Standard shadow (shadow-md) */
+    shadow: "md",
+    /** Minimum action button distance from edge */
+    actionMargin: 4,
+    actionMarginPx: 16,
+};
+/**
+ * Card CSS variable references
+ */
+exports.CARD_CSS = {
+    radius: "var(--radius-xl)",
+    shadow: "var(--shadow-md)",
+    padding: "var(--spacing-6)",
+};
+// =============================================================================
+// SECTION SPACING
+// =============================================================================
+/**
+ * Spacing for major sections and headings
+ * Especially important after Card components
+ */
+exports.SECTION_SPACING = {
+    /** Minimum margin-top after a Card component (mt-12 = 48px) */
+    afterCard: 12,
+    afterCardPx: 48,
+    /** Recommended margin-top for major sections (mt-16 = 64px) */
+    majorSection: 16,
+    majorSectionPx: 64,
+    /** Standard heading margin-top (mt-8 = 32px) */
+    heading: 8,
+    headingPx: 32,
+    /** Sub-heading margin-top (mt-6 = 24px) */
+    subHeading: 6,
+    subHeadingPx: 24,
+};
+// =============================================================================
+// DISABLED STATE STANDARDS
+// =============================================================================
+/**
+ * Minimum values for disabled states (WCAG compliant)
+ */
+exports.DISABLED_STANDARDS = {
+    /** Minimum opacity for disabled elements */
+    minOpacity: 0.5,
+    /** Minimum gray shade for disabled text (gray-400) */
+    minTextGray: 400,
+    /** Recommended cursor for disabled elements */
+    cursor: "not-allowed",
+};
+// =============================================================================
+// LINE CLAMP
+// =============================================================================
+/**
+ * Common line clamp values for text truncation
+ */
+exports.LINE_CLAMP = {
+    /** Single line with ellipsis */
+    single: 1,
+    /** Two lines (common for card descriptions) */
+    short: 2,
+    /** Three lines (card descriptions with more space) */
+    medium: 3,
+    /** Four lines (longer previews) */
+    long: 4,
+    /** Six lines (expanded previews) */
+    extended: 6,
+};
+// =============================================================================
+// COLORS
+// =============================================================================
+/**
+ * Semantic color tokens
+ */
+exports.COLORS = {
+    // Brand
+    primary: "#1E63F1",
+    // Status
+    success: "#22c55e",
+    error: "#ef4444",
+    warning: "#f59e0b",
+    info: "#3b82f6",
+    // Backgrounds
+    bgPrimary: "#ffffff",
+    bgSecondary: "#f1f5f9",
+    // Text
+    textPrimary: "#0f172a",
+    textSecondary: "#475569",
+    textOnPrimary: "#ffffff",
+    // Neutrals (common)
+    white: "#ffffff",
+    black: "#000000",
+};
+/**
+ * Colors that are allowed as hardcoded values
+ * (pure black/white for borders, shadows, etc.)
+ */
+exports.ALLOWED_HARDCODED_COLORS = [
+    "#ffffff",
+    "#fff",
+    "#000000",
+    "#000",
+];
+// =============================================================================
+// TOUCH TARGETS & ACCESSIBILITY
+// =============================================================================
+/**
+ * Touch target sizes per WCAG guidelines
+ */
+exports.TOUCH_TARGETS = {
+    /** Minimum touch target size (44px) - WCAG 2.1 AA */
+    minimum: 44,
+    /** Small button size range (below minimum) */
+    smallMin: 24,
+    smallMax: 32,
+    /** Recommended touch target (48px) */
+    recommended: 48,
+};
+/**
+ * Minimum contrast ratios per WCAG
+ */
+exports.CONTRAST_RATIOS = {
+    /** Normal text minimum (4.5:1) - WCAG AA */
+    normalText: 4.5,
+    /** Large text minimum (3:1) - WCAG AA */
+    largeText: 3.0,
+    /** UI components minimum (3:1) - WCAG AA */
+    uiComponents: 3.0,
+    /** Enhanced contrast (7:1) - WCAG AAA */
+    enhanced: 7.0,
+};
+// =============================================================================
+// VIEWPORT & RESPONSIVE
+// =============================================================================
+/**
+ * Standard viewport widths for responsive testing
+ */
+exports.VIEWPORTS = {
+    /** Mobile portrait (iPhone SE) */
+    mobileS: 320,
+    /** Mobile standard (iPhone 12/13) */
+    mobile: 375,
+    /** Mobile large (iPhone Plus) */
+    mobileL: 428,
+    /** Tablet portrait */
+    tablet: 768,
+    /** Laptop */
+    laptop: 1024,
+    /** Desktop */
+    desktop: 1280,
+    /** Large desktop */
+    desktopL: 1440,
+};
+/**
+ * Tailwind breakpoints
+ */
+exports.BREAKPOINTS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536,
+};
+// =============================================================================
+// ICON SIZES
+// =============================================================================
+/**
+ * Standard icon sizes in pixels
+ */
+exports.ICON_SIZES = {
+    /** Extra small (12px) */
+    xs: 12,
+    /** Small (16px) - inline with small text */
+    sm: 16,
+    /** Medium (20px) - default for buttons/inputs */
+    md: 20,
+    /** Large (24px) - standalone icons */
+    lg: 24,
+    /** Extra large (32px) - hero/feature icons */
+    xl: 32,
+    /** 2x large (48px) - decorative */
+    "2xl": 48,
+};
+// =============================================================================
+// TYPOGRAPHY
+// =============================================================================
+/**
+ * Line height recommendations
+ */
+exports.LINE_HEIGHTS = {
+    /** Tight (1.25) - headings */
+    tight: 1.25,
+    /** Normal (1.5) - body text */
+    normal: 1.5,
+    /** Relaxed (1.75) - large blocks of text */
+    relaxed: 1.75,
+    /** Loose (2) - very readable text */
+    loose: 2,
+};
+// =============================================================================
+// Z-INDEX SCALE
+// =============================================================================
+/**
+ * Z-index scale for layering
+ */
+exports.Z_INDEX = {
+    /** Below default (negative) */
+    behind: -1,
+    /** Default layer */
+    base: 0,
+    /** Raised elements (cards, buttons) */
+    raised: 10,
+    /** Dropdowns, popovers */
+    dropdown: 100,
+    /** Sticky headers */
+    sticky: 200,
+    /** Fixed elements */
+    fixed: 300,
+    /** Modals, dialogs */
+    modal: 400,
+    /** Tooltips */
+    tooltip: 500,
+    /** Toast notifications */
+    toast: 600,
+    /** Maximum (overlays) */
+    max: 9999,
+};
+// =============================================================================
+// ANIMATION DURATIONS
+// =============================================================================
+/**
+ * Standard animation durations in milliseconds
+ */
+exports.DURATIONS = {
+    /** Instant (0ms) */
+    instant: 0,
+    /** Fast (150ms) - micro-interactions */
+    fast: 150,
+    /** Normal (300ms) - default transitions */
+    normal: 300,
+    /** Slow (500ms) - complex animations */
+    slow: 500,
+    /** Very slow (1000ms) - page transitions */
+    verySlow: 1000,
+};
+// =============================================================================
+// BORDER RADIUS
+// =============================================================================
+/**
+ * Border radius scale (Tailwind-based)
+ */
+exports.BORDER_RADIUS = {
+    /** None (0px) */
+    none: 0,
+    /** Small (2px) */
+    sm: 2,
+    /** Default (4px) */
+    default: 4,
+    /** Medium (6px) */
+    md: 6,
+    /** Large (8px) */
+    lg: 8,
+    /** Extra large (12px) */
+    xl: 12,
+    /** 2x large (16px) */
+    "2xl": 16,
+    /** 3x large (24px) */
+    "3xl": 24,
+    /** Full (9999px) - pills/circles */
+    full: 9999,
+};
+// =============================================================================
+// FOCUS RING STYLES
+// =============================================================================
+/**
+ * Focus ring configuration for accessibility
+ * Use focus-visible for keyboard-only focus indicators
+ */
+exports.FOCUS_RING = {
+    /** Ring width (2px standard) */
+    width: 2,
+    /** Ring offset from element */
+    offset: 2,
+    /** Ring color (should use primary) */
+    color: "primary",
+    /** Standard focus-visible class */
+    className: "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+    /** Outline-none with ring replacement */
+    outlineNone: "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+};
+// =============================================================================
+// ANIMATION EASINGS
+// =============================================================================
+/**
+ * Standard easing functions for animations
+ */
+exports.EASINGS = {
+    /** Linear (no easing) */
+    linear: "linear",
+    /** Ease in (slow start) */
+    easeIn: "ease-in",
+    /** Ease out (slow end) - most common for UI */
+    easeOut: "ease-out",
+    /** Ease in-out (slow start and end) */
+    easeInOut: "ease-in-out",
+    /** Standard Material-style easing */
+    standard: "cubic-bezier(0.4, 0, 0.2, 1)",
+    /** Decelerate (entering elements) */
+    decelerate: "cubic-bezier(0.0, 0, 0.2, 1)",
+    /** Accelerate (exiting elements) */
+    accelerate: "cubic-bezier(0.4, 0, 1, 1)",
+    /** Sharp (quick transitions) */
+    sharp: "cubic-bezier(0.4, 0, 0.6, 1)",
+};
+/**
+ * Tailwind easing classes
+ */
+exports.EASING_CLASSES = [
+    "ease-linear",
+    "ease-in",
+    "ease-out",
+    "ease-in-out",
+];
+// =============================================================================
+// COMPONENT HEIGHTS
+// =============================================================================
+/**
+ * Standard component heights in Tailwind units
+ * h-10 = 40px, h-11 = 44px (touch target), h-12 = 48px, h-14 = 56px
+ */
+exports.COMPONENT_HEIGHTS = {
+    /** Small button/input (h-8 = 32px) */
+    sm: 8,
+    smPx: 32,
+    /** Default button/input (h-10 = 40px) */
+    default: 10,
+    defaultPx: 40,
+    /** Touch-target minimum (h-11 = 44px) - WCAG compliant */
+    touch: 11,
+    touchPx: 44,
+    /** Large button/input (h-12 = 48px) */
+    lg: 12,
+    lgPx: 48,
+    /** Extra large (h-14 = 56px) */
+    xl: 14,
+    xlPx: 56,
+};
+/**
+ * Card header height (must be consistent for alignment)
+ */
+exports.HEADER_HEIGHTS = {
+    /** Card header minimum height (44px for touch targets) */
+    cardHeader: 44,
+    /** Page header height */
+    pageHeader: 64,
+    /** Toolbar height */
+    toolbar: 48,
+};
+// =============================================================================
+// GRID CONFIGURATIONS
+// =============================================================================
+/**
+ * Common responsive grid column configurations
+ */
+exports.GRID_CONFIGS = {
+    /** 1 column on mobile, 2 on tablet, 3 on desktop */
+    responsive3: {
+        base: 1,
+        md: 2,
+        lg: 3,
+        className: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+    },
+    /** 1 column on mobile, 2 on tablet, 4 on desktop */
+    responsive4: {
+        base: 1,
+        md: 2,
+        lg: 4,
+        className: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+    },
+    /** 2 columns on mobile, 3 on tablet, 6 on desktop */
+    responsive6: {
+        base: 2,
+        md: 3,
+        lg: 6,
+        className: "grid-cols-2 md:grid-cols-3 lg:grid-cols-6",
+    },
+    /** Stats grid: 2 on mobile, 4 on desktop */
+    stats: {
+        base: 2,
+        lg: 4,
+        className: "grid-cols-2 lg:grid-cols-4",
+    },
+};
+// =============================================================================
+// FONT SIZE TO ICON SIZE MAPPING
+// =============================================================================
+/**
+ * Recommended icon sizes for different text sizes
+ * Icons should scale proportionally with text
+ */
+exports.TEXT_TO_ICON_SIZE = {
+    "text-xs": [12, 14, 16],
+    "text-sm": [14, 16, 18],
+    "text-base": [16, 18, 20],
+    "text-lg": [18, 20, 24],
+    "text-xl": [20, 24],
+    "text-2xl": [24, 28, 32],
+};
+// =============================================================================
+// BORDER WIDTHS
+// =============================================================================
+/**
+ * Standard border widths
+ */
+exports.BORDER_WIDTHS = {
+    /** No border */
+    none: 0,
+    /** Default border (1px) */
+    default: 1,
+    /** Medium border (2px) */
+    md: 2,
+    /** Thick border (4px) */
+    thick: 4,
+    /** Extra thick (8px) */
+    extraThick: 8,
+};
+// =============================================================================
+// FONT WEIGHTS
+// =============================================================================
+/**
+ * Font weight scale matching Tailwind
+ */
+exports.FONT_WEIGHTS = {
+    thin: 100,
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+};
+/**
+ * Font weight CSS variable mapping
+ */
+exports.FONT_WEIGHT_VARS = {
+    100: "--font-thin",
+    200: "--font-extralight",
+    300: "--font-light",
+    400: "--font-normal",
+    500: "--font-medium",
+    600: "--font-semibold",
+    700: "--font-bold",
+    800: "--font-extrabold",
+    900: "--font-black",
+};
+// =============================================================================
+// LETTER SPACING (Tracking)
+// =============================================================================
+/**
+ * Letter spacing scale matching Tailwind
+ */
+exports.LETTER_SPACING = {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0em",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
+};
+/**
+ * Tailwind tracking classes
+ */
+exports.TRACKING_CLASSES = [
+    "tracking-tighter",
+    "tracking-tight",
+    "tracking-normal",
+    "tracking-wide",
+    "tracking-wider",
+    "tracking-widest",
+];
+// =============================================================================
+// AVATAR SIZES
+// =============================================================================
+/**
+ * Standard avatar sizes
+ */
+exports.AVATAR_SIZES = {
+    /** Extra small (24px) - inline/compact */
+    xs: 24,
+    /** Small (32px) - lists, comments */
+    sm: 32,
+    /** Medium (40px) - default */
+    md: 40,
+    /** Large (48px) - profiles */
+    lg: 48,
+    /** Extra large (64px) - hero/featured */
+    xl: 64,
+    /** 2x large (96px) - profile pages */
+    "2xl": 96,
+};
+// =============================================================================
+// BADGE / CHIP SIZES
+// =============================================================================
+/**
+ * Standard badge/chip heights
+ */
+exports.BADGE_SIZES = {
+    /** Small (20px) - inline badges */
+    sm: 20,
+    /** Medium (24px) - default badges */
+    md: 24,
+    /** Large (28px) - prominent badges */
+    lg: 28,
+};
+/**
+ * Standard chip heights
+ */
+exports.CHIP_SIZES = {
+    /** Small (24px) - compact filters */
+    sm: 24,
+    /** Medium (32px) - default chips */
+    md: 32,
+    /** Large (40px) - prominent chips */
+    lg: 40,
+};
+// =============================================================================
+// MODAL / DIALOG SIZES
+// =============================================================================
+/**
+ * Standard modal/dialog widths
+ */
+exports.MODAL_SIZES = {
+    /** Extra small (320px) - alerts, confirmations */
+    xs: 320,
+    /** Small (400px) - simple forms */
+    sm: 400,
+    /** Medium (500px) - default */
+    md: 500,
+    /** Large (640px) - complex forms */
+    lg: 640,
+    /** Extra large (800px) - data-heavy modals */
+    xl: 800,
+    /** Full width (90vw max) */
+    full: "90vw",
+};
+// =============================================================================
+// SKELETON / LOADING STATES
+// =============================================================================
+/**
+ * Skeleton loading animation settings
+ */
+exports.SKELETON_ANIMATION = {
+    /** Animation duration (ms) */
+    duration: 1500,
+    /** Animation timing function */
+    easing: "ease-in-out",
+    /** Shimmer gradient colors (light mode) */
+    gradientLight: ["#f0f0f0", "#e0e0e0", "#f0f0f0"],
+    /** Shimmer gradient colors (dark mode) */
+    gradientDark: ["#2a2a2a", "#3a3a3a", "#2a2a2a"],
+};
+/**
+ * Common skeleton heights for different content types
+ */
+exports.SKELETON_HEIGHTS = {
+    /** Text line (16px) */
+    text: 16,
+    /** Heading (24px) */
+    heading: 24,
+    /** Paragraph line (14px) */
+    paragraph: 14,
+    /** Button (40px) */
+    button: 40,
+    /** Avatar placeholder (40px) */
+    avatar: 40,
+    /** Card (200px) */
+    card: 200,
+    /** Image thumbnail (150px) */
+    thumbnail: 150,
+};
+// =============================================================================
+// TABLE STYLES
+// =============================================================================
+/**
+ * Standard table cell padding
+ */
+exports.TABLE_PADDING = {
+    /** Compact cell padding (8px) */
+    compact: 2,
+    compactPx: 8,
+    /** Default cell padding (12px) */
+    default: 3,
+    defaultPx: 12,
+    /** Comfortable cell padding (16px) */
+    comfortable: 4,
+    comfortablePx: 16,
+};
+/**
+ * Standard table row heights
+ */
+exports.TABLE_ROW_HEIGHTS = {
+    /** Compact (36px) */
+    compact: 36,
+    /** Default (48px) */
+    default: 48,
+    /** Comfortable (56px) */
+    comfortable: 56,
+};
+//# sourceMappingURL=design-tokens.js.map