feat: add expo mobile application source code

2026-05-21 16:06:35 +07:00
parent 76d7a5c5c6
commit 0c65a7811b
77 changed files with 20356 additions and 0 deletions
@@ -0,0 +1,150 @@
+// ─────────────────────────────────────────────────────
+//  BIIPROJECT — Design System v3.0
+//  Palette: Neon Lime (#C6F135) · Charcoal Black (#1A1A1A) · Clean White (#FFFFFF)
+//  Inspired by: modern fintech/logistics dark-contrast UI
+// ─────────────────────────────────────────────────────
+
+export const PALETTE = {
+  // ── Core ──────────────────────────────────────────
+  lime:         '#C6F135', // Primary Neon Lime — CTA, active states, highlights
+  limeDark:     '#A8D820', // Darker lime for pressed states
+  limeLight:    '#ECFB97', // Soft lime for backgrounds/badges
+  limeMuted:    '#C6F13526', // 15% opacity lime for subtle tints
+
+  black:        '#111111', // True near-black — primary surfaces/dark mode bg
+  charcoal:     '#1A1A1A', // Charcoal — text, buttons, cards
+  graphite:     '#2A2A2A', // Card surface in dark mode
+  steel:        '#3D3D3D', // Borders, dividers in dark mode
+
+  white:        '#FFFFFF', // Pure white — light mode backgrounds
+  offWhite:     '#F5F5F5', // Light gray background
+  snow:         '#FAFAFA', // Card surfaces in light mode
+  mist:         '#EEEEEE', // Border / divider in light mode
+  fog:          '#D4D4D4', // Muted / disabled
+
+  // ── Semantic ──────────────────────────────────────
+  textDark:     '#111111', // Primary text in light mode
+  textMuted:    '#6B6B6B', // Secondary text in light mode
+  textDimmed:   '#9B9B9B', // Placeholder / timestamp
+
+  textLight:    '#FFFFFF', // Primary text in dark mode
+  textLightMuted: '#A3A3A3', // Secondary text in dark mode
+
+  // ── Status ────────────────────────────────────────
+  success:      '#22C55E', // Green (status success)
+  error:        '#EF4444', // Red (errors, danger)
+  warning:      '#F59E0B', // Amber (warnings)
+  info:         '#3B82F6', // Blue (info)
+};
+
+export const Theme = {
+  light: {
+    background:       PALETTE.offWhite,    // Page background: #F5F5F5
+    surface:          PALETTE.white,       // Card surface: #FFFFFF
+    surfaceLight:     PALETTE.snow,        // Subtle surface: #FAFAFA
+    surfaceElevated:  PALETTE.white,
+
+    primary:          PALETTE.lime,        // CTA / Active: #C6F135
+    primaryDark:      PALETTE.limeDark,    // Press state: #A8D820
+    primaryLight:     PALETTE.limeLight,   // Badge bg: #ECFB97
+    primaryMuted:     PALETTE.limeMuted,   // Tinted bg: #C6F13526
+    secondary:        PALETTE.charcoal,    // Buttons/icons: #1A1A1A
+    accent:           PALETTE.lime,
+
+    text:             PALETTE.textDark,    // #111111
+    textSecondary:    PALETTE.textMuted,   // #6B6B6B
+    textPlaceholder:  PALETTE.textDimmed,  // #9B9B9B
+
+    border:           PALETTE.mist,        // #EEEEEE
+    divider:          PALETTE.fog,         // #D4D4D4
+
+    tabBar:           PALETTE.white,       // Tab bar background
+    tabBarActive:     PALETTE.charcoal,    // Active tab icon: charcoal
+    tabBarInactive:   '#A3A3A3',           // Inactive tab icon
+
+    error:            PALETTE.error,
+    success:          PALETTE.success,
+    warning:          PALETTE.warning,
+
+    // Legacy compat
+    darkNav:          PALETTE.charcoal,
+    pastelPurple:     PALETTE.limeLight,
+    pastelBlue:       '#C6F135',
+    pastelYellow:     PALETTE.limeLight,
+    pastelPink:       PALETTE.limeMuted,
+    glass:            'rgba(255, 255, 255, 0.92)',
+  },
+
+  dark: {
+    background:       PALETTE.black,       // #111111
+    surface:          PALETTE.graphite,    // #2A2A2A
+    surfaceLight:     '#333333',
+    surfaceElevated:  '#3A3A3A',
+
+    primary:          PALETTE.lime,        // Lime stays vibrant in dark: #C6F135
+    primaryDark:      PALETTE.limeDark,
+    primaryLight:     '#3A3D00',           // Dark lime tint for dark mode badges
+    primaryMuted:     PALETTE.limeMuted,
+    secondary:        PALETTE.white,
+    accent:           PALETTE.lime,
+
+    text:             PALETTE.textLight,   // #FFFFFF
+    textSecondary:    PALETTE.textLightMuted, // #A3A3A3
+    textPlaceholder:  '#6B6B6B',
+
+    border:           PALETTE.steel,       // #3D3D3D
+    divider:          '#333333',
+
+    tabBar:           PALETTE.black,
+    tabBarActive:     PALETTE.lime,        // Active = lime in dark mode
+    tabBarInactive:   '#6B6B6B',
+
+    error:            '#FF6B6B',
+    success:          '#4ADE80',
+    warning:          '#FBBF24',
+
+    // Legacy compat
+    darkNav:          PALETTE.black,
+    pastelPurple:     '#C6F13515',
+    pastelBlue:       '#C6F13515',
+    pastelYellow:     '#C6F13515',
+    pastelPink:       '#C6F13515',
+    glass:            'rgba(17, 17, 17, 0.92)',
+  },
+
+  spacing: {
+    xs:  4,
+    sm:  8,
+    md:  16,
+    lg:  24,
+    xl:  32,
+    xxl: 40,
+  },
+
+  radius: {
+    sm:   12,
+    md:   20,
+    lg:   28,
+    xl:   36,
+    full: 999,
+  },
+};
+
+export const Colors = {
+  light: {
+    text:            PALETTE.textDark,
+    background:      PALETTE.offWhite,
+    tint:            PALETTE.lime,
+    icon:            PALETTE.textMuted,
+    tabIconDefault:  '#A3A3A3',
+    tabIconSelected: PALETTE.charcoal,
+  },
+  dark: {
+    text:            PALETTE.textLight,
+    background:      PALETTE.black,
+    tint:            PALETTE.lime,
+    icon:            PALETTE.textLightMuted,
+    tabIconDefault:  '#6B6B6B',
+    tabIconSelected: PALETTE.lime,
+  },
+};