frontend/src/theme/index.ts

/**
 * 胡萝卜BBS主题系统
 * 基于胡萝卜橙主色调的设计系统
 */

// ==================== 颜色系统 ====================
export const colors = {
  primary: {
    main: '#FF6B35',      // 胡萝卜橙
    light: '#FF8F66',
    dark: '#E5521D',
    contrast: '#FFFFFF',
  },
  secondary: {
    main: '#4CAF50',
    light: '#80E27E',
    dark: '#087F23',
  },
  background: {
    default: '#F5F5F5',
    paper: '#FFFFFF',
    disabled: '#E0E0E0',
  },
  text: {
    primary: '#212121',
    secondary: '#757575',
    disabled: '#9E9E9E',
    hint: '#BDBDBD',
    inverse: '#FFFFFF',
  },
  divider: '#E0E0E0',
  error: {
    main: '#F44336',
    light: '#FF7961',
    dark: '#D32F2F',
  },
  success: {
    main: '#4CAF50',
    light: '#80E27E',
    dark: '#087F23',
  },
  warning: {
    main: '#FF9800',
    light: '#FFB74D',
    dark: '#F57C00',
  },
  info: {
    main: '#2196F3',
    light: '#64B5F6',
    dark: '#1976D2',
  },
};

// ==================== 字体系统 ====================
export const fontSizes = {
  xs: 10,
  sm: 12,
  md: 14,
  lg: 16,
  xl: 18,
  '2xl': 20,
  '3xl': 24,
  '4xl': 30,
};

// ==================== 间距系统（4px基准）====================
export const spacing = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 20,
  '2xl': 24,
  '3xl': 32,
  '4xl': 40,
};

// ==================== 圆角系统 ====================
export const borderRadius = {
  sm: 4,
  md: 8,
  lg: 12,
  xl: 16,
  '2xl': 24,
  full: 9999,
};

// ==================== 阴影系统 ====================
export const shadows = {
  sm: { 
    shadowColor: '#000', 
    shadowOffset: { width: 0, height: 1 }, 
    shadowOpacity: 0.18, 
    shadowRadius: 1.0, 
    elevation: 1 
  },
  md: { 
    shadowColor: '#000', 
    shadowOffset: { width: 0, height: 2 }, 
    shadowOpacity: 0.22, 
    shadowRadius: 2.22, 
    elevation: 3 
  },
  lg: { 
    shadowColor: '#000', 
    shadowOffset: { width: 0, height: 4 }, 
    shadowOpacity: 0.3, 
    shadowRadius: 4.65, 
    elevation: 6 
  },
};

// ==================== 导出主题对象 ====================
export const theme = { 
  colors, 
  fontSizes, 
  spacing, 
  borderRadius, 
  shadows 
};

export type Theme = typeof theme;

// ==================== 主题配置（用于React Native Paper）====================
export const paperTheme = {
  colors: {
    primary: colors.primary.main,
    primaryContainer: colors.primary.light,
    secondary: colors.secondary.main,
    secondaryContainer: colors.secondary.light,
    tertiary: colors.info.main,
    tertiaryContainer: colors.info.light,
    surface: colors.background.paper,
    surfaceVariant: colors.background.default,
    surfaceDisabled: colors.background.disabled,
    background: colors.background.default,
    error: colors.error.main,
    errorContainer: colors.error.light,
    onPrimary: colors.primary.contrast,
    onPrimaryContainer: colors.primary.dark,
    onSecondary: colors.text.inverse,
    onSecondaryContainer: colors.secondary.dark,
    onTertiary: colors.text.inverse,
    onTertiaryContainer: colors.info.dark,
    onSurface: colors.text.primary,
    onSurfaceVariant: colors.text.secondary,
    onSurfaceDisabled: colors.text.disabled,
    onError: colors.text.inverse,
    onErrorContainer: colors.error.dark,
    onBackground: colors.text.primary,
    outline: colors.divider,
    outlineVariant: colors.divider,
    inverseSurface: colors.text.primary,
    inverseOnSurface: colors.text.inverse,
    inversePrimary: colors.primary.light,
    shadow: '#000000',
    scrim: '#000000',
    backdrop: 'rgba(0, 0, 0, 0.5)',
    elevation: {
      level0: 'transparent',
      level1: colors.background.paper,
      level2: colors.background.paper,
      level3: colors.background.paper,
      level4: colors.background.paper,
      level5: colors.background.paper,
    },
  },
  roundness: borderRadius.md,
};