← back to Govarbitrage

apps/mobile/constants/theme.ts

74 lines

/**
 * Dark, dense, financial-dashboard color palette.
 * Inspired by Bloomberg Terminal / trading cockpit aesthetics.
 */
export const Colors = {
  bg: "#0D1117",           // near-black background
  surface: "#161B22",      // card/panel surface
  surfaceAlt: "#1C2128",   // alternate surface (elevated)
  border: "#30363D",       // subtle border
  borderStrong: "#484F58", // stronger border / divider

  // Text
  textPrimary: "#E6EDF3",   // primary text
  textSecondary: "#8B949E", // muted / secondary
  textMuted: "#6E7681",     // muted labels — ~4.7:1 on bg (WCAG AA); divider tone lives in borderStrong

  // Accent / brand
  accent: "#1F6FEB",        // electric blue — action / link
  accentLight: "#388BFD",

  // Financial states
  profit: "#3FB950",        // positive / gain (green)
  loss: "#F85149",          // negative / risk (red)
  warning: "#D29922",       // caution / medium risk (amber)
  neutral: "#8B949E",       // neutral / unknown

  // Score color bands (0–100)
  scoreHigh: "#3FB950",     // 70+
  scoreMid: "#D29922",      // 40–69
  scoreLow: "#F85149",      // 0–39

  // Source chips
  gsaColor: "#1F6FEB",
  govdealsColor: "#388BFD",

  // Risk badges
  riskLow: "#3FB950",
  riskMedium: "#D29922",
  riskHigh: "#F85149",

  // Rank badge
  rankGold: "#D29922",
  rankBg: "#21262D",
} as const;

export const Typography = {
  mono: "System",  // will be overridden per-platform if needed
  sizes: {
    xs: 10,
    sm: 12,
    base: 14,
    md: 16,
    lg: 18,
    xl: 22,
    xxl: 28,
  },
} as const;

export const Spacing = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 24,
  xxl: 32,
} as const;

export const Radius = {
  sm: 4,
  md: 8,
  lg: 12,
  pill: 100,
} as const;