Update dependencies and enhance Tailwind CSS configuration for web applications
- Added new dependencies including clsx, lucide-react, recharts, and various Radix UI components to improve UI functionality. - Upgraded Tailwind CSS to version 4.0.0 and updated configuration to utilize CSS variables for theming and responsive design. - Introduced global styles and improved accessibility features in the layout and components. - Removed outdated login page and refactored authentication store for better state management. - Enhanced API service with additional authentication methods and improved error handling. These changes aim to modernize the web applications and improve user experience through better design and functionality.
This commit is contained in:
Ho Ngoc Hai
220
apps/web-client/src/styles/theme.css
Normal file
220
apps/web-client/src/styles/theme.css
Normal file
@@ -0,0 +1,220 @@
|
||||
/**
|
||||
* EN: Design System Theme Tokens
|
||||
* VI: Các token thiết kế cho Design System
|
||||
*
|
||||
* This file contains all CSS custom properties (variables) for the design system,
|
||||
* including colors, typography, spacing, layout, animations, and more.
|
||||
* These tokens are used throughout the application and can be referenced in Tailwind CSS
|
||||
* utility classes via the tailwind.config.js configuration.
|
||||
*
|
||||
* File này chứa tất cả các CSS custom properties (biến) cho design system,
|
||||
* bao gồm màu sắc, typography, spacing, layout, animations, và nhiều hơn nữa.
|
||||
* Các token này được sử dụng trong toàn bộ ứng dụng và có thể được tham chiếu trong
|
||||
* các utility classes của Tailwind CSS thông qua cấu hình tailwind.config.js.
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* ============================================
|
||||
EN: Color Palette - Dark Mode (Primary Theme)
|
||||
VI: Bảng màu - Dark Mode (Theme chính)
|
||||
============================================ */
|
||||
|
||||
/* Background Colors / Màu nền */
|
||||
--bg-primary: #0A0A0A; /* Almost black - Main background */
|
||||
--bg-secondary: #121212; /* Dark grey - Card/Panel background */
|
||||
--bg-tertiary: #1A1A1A; /* Dark grey - Hover states */
|
||||
--bg-elevated: #242424; /* Elevated surfaces (modals, dropdowns) */
|
||||
|
||||
/* Text Colors (WCAG Compliant) / Màu chữ (tuân thủ WCAG) */
|
||||
--text-primary: #FAFAFA; /* Off-white - Primary text (4.5:1 contrast) */
|
||||
--text-secondary: #E0E0E0; /* Light grey - Secondary text */
|
||||
--text-tertiary: #A0A0A0; /* Grey - Tertiary/disabled text */
|
||||
--text-inverse: #1A1A1A; /* Dark - Text on light backgrounds */
|
||||
|
||||
/* Brand/Accent Colors / Màu thương hiệu/Accent */
|
||||
--accent-primary: #3B82F6; /* Primary blue - CTAs, links */
|
||||
--accent-secondary: #8B5CF6; /* Purple - Highlights */
|
||||
--accent-success: #10B981; /* Green - Success states */
|
||||
--accent-warning: #F59E0B; /* Amber - Warnings */
|
||||
--accent-error: #EF4444; /* Red - Errors */
|
||||
--accent-info: #06B6D4; /* Cyan - Info */
|
||||
|
||||
/* Chat Specific Colors / Màu riêng cho Chat */
|
||||
--chat-user-bubble: #2563EB; /* Deep blue - User message */
|
||||
--chat-ai-bubble: #374151; /* Dark grey - AI message */
|
||||
--chat-user-text: #FFFFFF; /* White text on blue */
|
||||
--chat-ai-text: #F3F4F6; /* Light text on grey */
|
||||
--chat-timestamp: #9CA3AF; /* Timestamp grey */
|
||||
--chat-divider: #1F2937; /* Divider between messages */
|
||||
|
||||
/* Border Colors / Màu viền */
|
||||
--border-primary: #2A2A2A; /* Default borders */
|
||||
--border-secondary: #3A3A3A; /* Hover borders */
|
||||
--border-focus: #3B82F6; /* Focus state - Blue */
|
||||
|
||||
/* ============================================
|
||||
EN: Light Mode Colors (Secondary Theme)
|
||||
VI: Màu sắc cho Light Mode (Theme phụ)
|
||||
============================================ */
|
||||
--bg-primary-light: #FFFFFF;
|
||||
--bg-secondary-light: #F9FAFB;
|
||||
--bg-tertiary-light: #F3F4F6;
|
||||
--text-primary-light: #111827;
|
||||
--text-secondary-light: #4B5563;
|
||||
--border-primary-light: #E5E7EB;
|
||||
|
||||
/* ============================================
|
||||
EN: Typography
|
||||
VI: Kiểu chữ
|
||||
============================================ */
|
||||
|
||||
/* Font Stack / Bộ font */
|
||||
--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
|
||||
/* Type Scale / Kích thước chữ */
|
||||
--text-6xl: 3.75rem; /* 60px - Hero titles */
|
||||
--text-5xl: 3rem; /* 48px - Page titles */
|
||||
--text-4xl: 2.25rem; /* 36px - Section headers */
|
||||
--text-3xl: 1.875rem; /* 30px - Card headers */
|
||||
--text-2xl: 1.5rem; /* 24px - Large body */
|
||||
--text-xl: 1.25rem; /* 20px - Emphasized text */
|
||||
--text-lg: 1.125rem; /* 18px - Large body */
|
||||
--text-base: 1rem; /* 16px - Default body */
|
||||
--text-sm: 0.875rem; /* 14px - Small text */
|
||||
--text-xs: 0.75rem; /* 12px - Captions */
|
||||
|
||||
/* Line Heights / Chiều cao dòng */
|
||||
--leading-none: 1;
|
||||
--leading-tight: 1.1;
|
||||
--leading-snug: 1.2;
|
||||
--leading-normal: 1.3;
|
||||
--leading-relaxed: 1.4;
|
||||
--leading-loose: 1.5;
|
||||
|
||||
/* Font Weights / Độ đậm chữ */
|
||||
--font-light: 300; /* Light text */
|
||||
--font-normal: 400; /* Body text */
|
||||
--font-medium: 500; /* Emphasized */
|
||||
--font-semibold: 600; /* Headings */
|
||||
--font-bold: 700; /* Strong emphasis */
|
||||
|
||||
/* ============================================
|
||||
EN: Spacing & Layout
|
||||
VI: Khoảng cách & Bố cục
|
||||
============================================ */
|
||||
|
||||
/* Base Unit: 4px (0.25rem) / Đơn vị cơ sở: 4px (0.25rem) */
|
||||
--space-0: 0;
|
||||
--space-1: 0.25rem; /* 4px */
|
||||
--space-2: 0.5rem; /* 8px */
|
||||
--space-3: 0.75rem; /* 12px */
|
||||
--space-4: 1rem; /* 16px */
|
||||
--space-5: 1.25rem; /* 20px */
|
||||
--space-6: 1.5rem; /* 24px */
|
||||
--space-8: 2rem; /* 32px */
|
||||
--space-10: 2.5rem; /* 40px */
|
||||
--space-12: 3rem; /* 48px */
|
||||
--space-16: 4rem; /* 64px */
|
||||
--space-20: 5rem; /* 80px */
|
||||
|
||||
/* Container Widths / Chiều rộng container */
|
||||
--container-sm: 640px; /* Small devices */
|
||||
--container-md: 768px; /* Medium devices */
|
||||
--container-lg: 1024px; /* Large devices */
|
||||
--container-xl: 1280px; /* Extra large */
|
||||
--container-2xl: 1536px; /* 2X large */
|
||||
--chat-max-width: 768px; /* Max width for chat messages */
|
||||
--sidebar-width: 280px; /* Conversation history sidebar */
|
||||
|
||||
/* Border Radius / Bo góc */
|
||||
--radius-sm: 0.25rem; /* 4px - Small elements */
|
||||
--radius-md: 0.5rem; /* 8px - Buttons, inputs */
|
||||
--radius-lg: 0.75rem; /* 12px - Cards */
|
||||
--radius-xl: 1rem; /* 16px - Large cards */
|
||||
--radius-2xl: 1.5rem; /* 24px - Modals */
|
||||
--radius-full: 9999px; /* Full round - Avatars, pills */
|
||||
|
||||
/* ============================================
|
||||
EN: Shadows (Dark Mode Optimized)
|
||||
VI: Đổ bóng (Tối ưu cho Dark Mode)
|
||||
============================================ */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
|
||||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
|
||||
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
|
||||
--shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3); /* Blue glow for focus */
|
||||
|
||||
/* ============================================
|
||||
EN: Grid System & Breakpoints
|
||||
VI: Hệ thống lưới & Điểm ngắt
|
||||
============================================ */
|
||||
--screen-sm: 640px; /* Mobile landscape */
|
||||
--screen-md: 768px; /* Tablet */
|
||||
--screen-lg: 1024px; /* Desktop */
|
||||
--screen-xl: 1280px; /* Large desktop */
|
||||
--screen-2xl: 1536px; /* Extra large desktop */
|
||||
|
||||
/* ============================================
|
||||
EN: Animation & Transitions
|
||||
VI: Animation & Chuyển tiếp
|
||||
============================================ */
|
||||
|
||||
/* Timing Functions / Hàm thời gian */
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
/* Duration / Thời lượng */
|
||||
--duration-fast: 150ms; /* Hover effects */
|
||||
--duration-normal: 250ms; /* Default transitions */
|
||||
--duration-slow: 350ms; /* Complex animations */
|
||||
--duration-slower: 500ms; /* Page transitions */
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
EN: Light Mode Theme Overrides
|
||||
VI: Ghi đè theme cho Light Mode
|
||||
============================================ */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg-primary: var(--bg-primary-light);
|
||||
--bg-secondary: var(--bg-secondary-light);
|
||||
--bg-tertiary: var(--bg-tertiary-light);
|
||||
--text-primary: var(--text-primary-light);
|
||||
--text-secondary: var(--text-secondary-light);
|
||||
--border-primary: var(--border-primary-light);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
EN: Dark Mode Theme (Explicit)
|
||||
VI: Theme Dark Mode (Rõ ràng)
|
||||
============================================ */
|
||||
[data-theme="dark"],
|
||||
.dark {
|
||||
--bg-primary: #0A0A0A;
|
||||
--bg-secondary: #121212;
|
||||
--bg-tertiary: #1A1A1A;
|
||||
--bg-elevated: #242424;
|
||||
--text-primary: #FAFAFA;
|
||||
--text-secondary: #E0E0E0;
|
||||
--text-tertiary: #A0A0A0;
|
||||
--border-primary: #2A2A2A;
|
||||
--border-secondary: #3A3A3A;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
EN: Light Mode Theme (Explicit)
|
||||
VI: Theme Light Mode (Rõ ràng)
|
||||
============================================ */
|
||||
[data-theme="light"],
|
||||
.light {
|
||||
--bg-primary: var(--bg-primary-light);
|
||||
--bg-secondary: var(--bg-secondary-light);
|
||||
--bg-tertiary: var(--bg-tertiary-light);
|
||||
--text-primary: var(--text-primary-light);
|
||||
--text-secondary: var(--text-secondary-light);
|
||||
--border-primary: var(--border-primary-light);
|
||||
}
|
||||
Reference in New Issue
Block a user