Initial commit: expo-popcore project

2025-12-25 16:31:17 +08:00
commit 0cbb74e03a
188 changed files with 20796 additions and 0 deletions
--- a/constants/theme.ts
+++ b/constants/theme.ts
@@ -0,0 +1,190 @@
+/**
+ * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
+ * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ */
+
+import { Platform } from 'react-native';
+
+const tintColorLight = '#0a7ea4';
+const tintColorDark = '#fff';
+
+export const Colors = {
+  light: {
+    text: '#11181C',
+    background: '#fff',
+    tint: tintColorLight,
+    icon: '#687076',
+    tabIconDefault: '#687076',
+    tabIconSelected: tintColorLight,
+    card: '#fff',
+    cardBorder: '#e0e0e0',
+    categoryBadge: '#007AFF',
+    categoryBadgeText: '#fff',
+    tagBadge: '#e0e0e0',
+    tagBadgeText: '#11181C',
+    imagePlaceholder: '#f0f0f0',
+    error: '#ff3b30',
+    border: '#e0e0e0',
+    textPlaceholder: '#A0A4AB',
+  },
+  dark: {
+    text: '#ECEDEE',
+    background: '#151718',
+    tint: tintColorDark,
+    icon: '#9BA1A6',
+    tabIconDefault: '#9BA1A6',
+    tabIconSelected: tintColorDark,
+    card: '#1F2223',
+    cardBorder: '#2C2E2F',
+    categoryBadge: '#0A84FF',
+    categoryBadgeText: '#fff',
+    tagBadge: '#2C2E2F',
+    tagBadgeText: '#ECEDEE',
+    imagePlaceholder: '#2C2E2F',
+    error: '#ff453a',
+    border: '#2C2E2F',
+    textPlaceholder: '#8A8F9C',
+  },
+  brand: {
+    primary: '#007AFF',
+    secondary: '#4ECDC4',
+    points: '#FF6B6B',
+    success: '#07C160',
+    danger: '#FF4444',
+    warning: '#FF9500',
+  },
+  text: {
+    primary: '#333333',
+    secondary: '#666666',
+    tertiary: '#999999',
+  },
+  background: {
+    primary: '#F5F5F5',
+    secondary: '#FFFFFF',
+    tertiary: '#FAFAFA',
+  },
+  border: '#E0E0E0',
+};
+
+export const Spacing = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 20,
+  xl: 24,
+  xxl: 32,
+};
+
+export const BorderRadius = {
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  xxl: 28,
+  full: 999,
+};
+
+export const FontSize = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 18,
+  xl: 20,
+  xxl: 24,
+  title: 28,
+};
+
+export const Shadow = {
+  small: {
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  medium: {
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 4,
+  },
+  large: {
+    shadowColor: '#000000',
+    shadowOffset: {
+      width: 0,
+      height: 8,
+    },
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+};
+
+export const Animation = {
+  scale: {
+    pressed: 0.98,
+  },
+  duration: {
+    fast: 200,
+    normal: 300,
+    slow: 500,
+  },
+};
+
+export const Layout = {
+  headerHeight: 56,
+  buttonHeight: {
+    small: 36,
+    medium: 48,
+    large: 56,
+  },
+  tabBarHeight: 60,
+  safeAreaPadding: {
+    top: 16,
+    bottom: 16,
+    left: 16,
+    right: 16,
+  },
+};
+
+export const Fonts = Platform.select({
+  ios: {
+    /** iOS `UIFontDescriptorSystemDesignDefault` */
+    sans: 'system-ui',
+    /** iOS `UIFontDescriptorSystemDesignSerif` */
+    serif: 'ui-serif',
+    /** iOS `UIFontDescriptorSystemDesignRounded` */
+    rounded: 'ui-rounded',
+    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
+    mono: 'ui-monospace',
+  },
+  default: {
+    sans: 'normal',
+    serif: 'serif',
+    rounded: 'normal',
+    mono: 'monospace',
+  },
+  web: {
+    sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    serif: "Georgia, 'Times New Roman', serif",
+    rounded: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
+    mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+  },
+});
+
+export const Theme = {
+  colors: Colors,
+  spacing: Spacing,
+  borderRadius: BorderRadius,
+  fontSize: FontSize,
+  shadow: Shadow,
+  animation: Animation,
+  layout: Layout,
+};