expo-popcore-old/constants/theme.ts

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