/** * 胡萝卜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, };