create-roadkit/src/themes/index.ts

Beautiful Next.js roadmap website generator with full-screen kanban boards, dark/light mode, and static export

/**
 * Roadkit Theme System
 * 
 * A comprehensive theming solution for roadkit that provides:
 * - shadcn/ui compatible theme configurations
 * - Dynamic theme injection for Next.js projects
 * - Accessibility validation and compliance
 * - CLI theme preview and management
 * - Color palette generation utilities
 */

// Core types and interfaces
export type {
  Theme,
  ThemeConfig,
  ThemeMode,
  ColorScheme,
  ShadcnStyle,
  ColorPalette,
  CSSVariable,
  ThemeValidationResult,
  ThemeRegistry as IThemeRegistry,
  ThemeGenerationOptions,
  ThemeInjectionOptions,
} from './types';

// Preset themes
export {
  blueTheme,
  greenTheme,
  orangeTheme,
  redTheme,
  roseTheme,
  stoneTheme,
  slateTheme,
  grayTheme,
  neutralTheme,
  zincTheme,
  violetTheme,
  yellowTheme,
  presetThemes,
  defaultTheme,
  getPresetTheme,
  getPresetThemeIds,
  getThemesByColorScheme,
} from './presets';

// Theme utilities
export {
  ColorUtils,
  ThemeValidator,
  ThemeGenerator,
} from './utils';

// Theme registry
export {
  ThemeRegistry,
  themeRegistry,
  getTheme,
  getAllThemes,
  searchThemes,
  validateTheme,
  exportThemeCSS,
  exportTailwindConfig,
} from './registry';

// Theme injection system
export {
  ThemeInjector,
  injectTheme,
  generateThemeFiles,
} from '../core/theme-injector';

// Theme preview system
export {
  ThemePreview,
  previewTheme,
  listThemes,
  compareThemes,
  searchAndPreviewThemes,
} from '../core/theme-preview';

/**
 * Quick Start Examples
 * 
 * // Get a preset theme
 * import { getPresetTheme, blueTheme } from 'roadkit/themes';
 * const theme = getPresetTheme('blue') || blueTheme;
 * 
 * // Validate theme accessibility
 * import { validateTheme } from 'roadkit/themes';
 * const validation = validateTheme(theme);
 * console.log(`WCAG AA: ${validation.accessibility.wcagAA}`);
 * 
 * // Generate theme from custom color
 * import { ThemeGenerator } from 'roadkit/themes';
 * const customTheme = ThemeGenerator.generateFromColor('210 50% 50%', {
 *   id: 'custom-blue',
 *   name: 'Custom Blue',
 *   colorScheme: 'blue',
 * });
 * 
 * // Inject theme into Next.js project
 * import { injectTheme } from 'roadkit/themes';
 * await injectTheme({
 *   projectDir: './my-next-app',
 *   theme: blueTheme,
 *   enableThemeSwitching: true,
 *   enableDarkMode: true,
 * });
 * 
 * // Preview theme in CLI
 * import { previewTheme } from 'roadkit/themes';
 * console.log(previewTheme('blue', { showBothModes: true }));
 * 
 * // Export theme CSS
 * import { exportThemeCSS } from 'roadkit/themes';
 * const lightCSS = exportThemeCSS('blue', 'light');
 * const darkCSS = exportThemeCSS('blue', 'dark');
 * 
 * // Export Tailwind config
 * import { exportTailwindConfig } from 'roadkit/themes';
 * const tailwindConfig = exportTailwindConfig('blue');
 */

/**
 * Theme System Constants
 */
export const THEME_SYSTEM_VERSION = '1.0.0';
export const SUPPORTED_FRAMEWORKS = ['next.js'] as const;
export const SUPPORTED_COLOR_SCHEMES = [
  'blue', 'green', 'orange', 'red', 'rose', 'stone', 
  'slate', 'gray', 'neutral', 'zinc', 'violet', 'yellow'
] as const;
export const SUPPORTED_STYLES = ['default', 'new-york'] as const;

/**
 * Default configuration
 */
export const DEFAULT_CONFIG = {
  colorScheme: 'blue' as const,
  style: 'new-york' as const,
  enableDarkMode: true,
  enableThemeSwitching: true,
  cssVariables: true,
  accessible: true,
} as const;