fix: paste trực tiếp tọa độ vào kinh độ vĩ độ

2026-06-23 17:50:05 +07:00
parent 28ea9abccd
commit 7182391241
6 changed files with 238 additions and 107 deletions
@@ -0,0 +1,116 @@
+# To AI Agent: Implement Unified Dual-Theme System (Light & Dark) for Yotrip App
+
+## 1. Context & Design System Overview
+We are building a robust, high-contrast, yet eye-friendly dual-theme system (Light and Dark modes) for our mobile application (`yotrip.labz.io.vn`). 
+- **Dark Theme Constraint:** Must use the pre-configured smoky grape base (`Vintage Grape` & `Dusty Grape`) with vivid lime/aquatic accents. No pitch-black.
+- **Light Theme Constraint:** Must use the soft parchment base (`Parchment`) to eliminate screen glare, using deep academic blue (`Yale Blue`) for high-contrast readability. No pure blazing white backgrounds.
+
+---
+
+## 2. Comprehensive Color Token Mapping
+
+### A. LIGHT THEME PALETTE ("Classic Heritage & Soft Sand")
+- **`Parchment` (`#f6f0ed`):** Map to **Global Page Backgrounds**. A warm, ancient-manuscript off-white that eliminates mobile screen glare.
+- **`Yale Blue` (`#28536b`):** Map to **Primary Text, Main Titles, and Primary Action Buttons**. Provides dependable trust and sharp contrast.
+- **`Steel Blue` (`#7ea8be`):** Map to **Active Navigation Tabs, Active Icons, and Secondary Actions**. 
+- **`Khaki Beige` (`#bbb193`):** Map to **Borders, Dividers, and Deactivated/Muted States**.
+- **`Rosy Taupe` (`#c2948a`):** Map to **Special Highlight Badges, Notification Banners, or Warm Accent Elements**.
+
+### B. DARK THEME PALETTE ("Vintage Velvet & Aquatic Zest")
+- **`Vintage Grape` (`#513b56`):** Map to **Global Page Backgrounds**.
+- **`Dusty Grape` (`#525174`):** Map to **Component Surfaces (Cards, Chat Bubbles, Accordion Rows)**.
+- **`Lime Cream` (`#bce784`):** Map to **Brand Text Highlights, Active Icons**.
+- **`Bondi Blue` (`#348aa7`):** Map to **Primary Action Buttons, Links**.
+- **`Emerald` (`#5dd39e`):** Map to **Success Utilities & "Tối ưu" badges**.
+
+---
+
+## 3. Technical Global Configuration
+
+### Option A: Clean CSS Variables (`global.css`)
+Replace or update the root variable tokens inside your main stylesheet:
+
+```css
+/* --- THEME SÁNG (Mềm mại, Tương phản cao, Không chói) --- */
+:root {
+  --background: #f6f0ed;       /* Parchment */
+  --surface: #ffffff;          /* Pure White for crisp card layers */
+  --surface-muted: #bbb193;    /* Khaki Beige */
+  
+  --border: #bbb193;           /* Khaki Beige */
+  
+  --text-primary: #28536b;     /* Yale Blue (High contrast text) */
+  --text-secondary: #7ea8be;   /* Steel Blue */
+  --text-accent: #c2948a;      /* Rosy Taupe */
+  
+  --primary: #28536b;          /* Yale Blue for main buttons */
+  --primary-hover: #1f4154;
+  --secondary-active: #7ea8be; /* Steel Blue */
+}
+
+/* --- THEME TỐI (Dịu mắt, Sang trọng, Không đen kịt) --- */
+:root.dark {
+  --background: #513b56;       /* Vintage Grape */
+  --surface: #525174;          /* Dusty Grape */
+  --surface-muted: #626186;
+  
+  --border: #626186;
+  
+  --text-primary: #f8fafc;     /* Soft White */
+  --text-secondary: #94a3b8;   /* Muted Slate */
+  --text-brand: #bce784;       /* Lime Cream */
+  
+  --primary: #348aa7;          /* Bondi Blue */
+  --primary-hover: #296f86;
+  --success-accent: #5dd39e;   /* Emerald */
+}
+
+### Option B: Tailwind Extension Configuration (tailwind.config.js)
+Expose these custom design tokens cleanly into the utility library framework:
+
+theme: {
+  extend: {
+    colors: {
+      yotripLight: {
+        bg: '#f6f0ed',       // Parchment
+        text: '#28536b',     // Yale Blue
+        steel: '#7ea8be',    // Steel Blue
+        khaki: '#bbb193',    // Khaki Beige
+        rosy: '#c2948a',     // Rosy Taupe
+      },
+      yotripDark: {
+        bg: '#513b56',       // Vintage Grape
+        surface: '#525174',  // Dusty Grape
+        lime: '#bce784',     // Lime Cream
+        bondi: '#348aa7',    // Bondi Blue
+        emerald: '#5dd39e',  // Emerald
+      }
+    }
+  }
+}
+
+## 4. UI Component Application Reference
+Apply these unified color classes to ensure the interface flips seamlessly:
+
+Chat Wrapper & Itinerary Timelines: - Light Mode: Background is yotripLight-bg, General Text is yotripLight-text.
+
+Dark Mode: Background is yotripDark-bg, General Text is #f8fafc.
+
+Navigation Tabs Menu:
+
+Light Mode: Inactive text is yotripLight-steel. Active tab gets a yotripLight-text highlight indicator.
+
+Dark Mode: Inactive text is yotripDark-surface. Active tab gets a yotripDark-lime highlight indicator.
+
+Main Action Call-To-Actions (e.g., "Thêm địa điểm"):
+
+Light Mode: Background is yotripLight-text (Yale Blue) with clean white text.
+
+Dark Mode: Background is yotripDark-bondi (Bondi Blue) with clean white text.
+
+## 5. Acceptance Criteria for Verification
+[ ] Ensure that toggling the .dark class on the <html> root triggers a global transition without style flashes (transition-colors duration-200).
+
+[ ] Text legibility inside Light Mode satisfies standard WCAG accessibility contrast limits on mobile displays out in the sun.
+
+[ ] The background of the expanded folder nodes/chat bubbles maps cleanly to their respective surface tokens across both system states.