@empline/preflight 1.1.0

package/dist/shared/design-tokens.d.ts

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