454 lines
14 KiB
CSS
454 lines
14 KiB
CSS
/**
|
|
* 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: #000000;
|
|
/* Pure black - Main background */
|
|
--bg-secondary: #0A0A0A;
|
|
/* Almost black - Card/Panel background */
|
|
--bg-tertiary: #141414;
|
|
/* Very dark grey - Hover states */
|
|
--bg-elevated: #1A1A1A;
|
|
/* Elevated surfaces (modals, dropdowns) */
|
|
|
|
/* Text Colors (WCAG Compliant) / Màu chữ (tuân thủ WCAG) */
|
|
--text-primary: #FFFFFF;
|
|
/* Pure white - Primary text */
|
|
--text-secondary: #B0B0B0;
|
|
/* Lighter grey - Secondary text (Improved contrast) */
|
|
--text-tertiary: #808080;
|
|
/* Mid grey - Tertiary/disabled text (Improved contrast) */
|
|
--text-muted: #505050;
|
|
/* Dark grey - Muted elements */
|
|
--text-inverse: #000000;
|
|
/* Black - Text on light/white backgrounds */
|
|
|
|
/* Brand/Accent Colors / Màu thương hiệu/Accent */
|
|
--accent-primary: #FFFFFF;
|
|
/* White - Primary actions (High contrast) */
|
|
--accent-secondary: #333333;
|
|
/* Dark grey - Secondary actions */
|
|
--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: #1A1A1A;
|
|
/* Dark grey - User message */
|
|
--chat-ai-bubble: transparent;
|
|
/* Transparent - AI message (Minimal) */
|
|
--chat-user-text: #FFFFFF;
|
|
/* White text */
|
|
--chat-ai-text: #E5E5E5;
|
|
/* Off-white text */
|
|
--chat-timestamp: #555555;
|
|
/* Dark grey timestamp */
|
|
--chat-divider: #222222;
|
|
/* Divider between messages */
|
|
|
|
/* Border Colors / Màu viền */
|
|
--border-primary: #222222;
|
|
/* Subtle borders */
|
|
--border-secondary: #333333;
|
|
/* Hover borders */
|
|
--border-focus: #FFFFFF;
|
|
/* Focus state - White */
|
|
|
|
/* ============================================
|
|
EN: Minimal Brand Colors (x.ai Inspired)
|
|
VI: Màu thương hiệu tối giản (x.ai Inspired)
|
|
============================================ */
|
|
|
|
/* Primary Brand Color - Clean white accent */
|
|
--brand-primary: #FFFFFF;
|
|
--brand-primary-light: #F8F8F8;
|
|
--brand-primary-dark: #E5E5E5;
|
|
--brand-primary-contrast: #000000;
|
|
|
|
/* Secondary Brand Color - Subtle gray */
|
|
--brand-secondary: #888888;
|
|
--brand-secondary-light: #AAAAAA;
|
|
--brand-secondary-dark: #666666;
|
|
|
|
/* Accent Color - Minimal gray accent */
|
|
--brand-accent: #CCCCCC;
|
|
--brand-accent-light: #DDDDDD;
|
|
--brand-accent-dark: #BBBBBB;
|
|
|
|
/* Brand Gradients - REMOVED for X.ai Minimalism */
|
|
/* Use solid colors instead for cleaner design */
|
|
|
|
/* ============================================
|
|
EN: Minimal Effects (x.ai Clean Style)
|
|
VI: Hiệu ứng tối giản (Phong cách x.ai sạch sẽ)
|
|
============================================ */
|
|
|
|
/* Glass Backgrounds - Ultra minimal for clean look */
|
|
--glass-bg-subtle: rgba(255, 255, 255, 0.01);
|
|
/* Ultra subtle - For minimal effect */
|
|
--glass-bg-default: rgba(255, 255, 255, 0.02);
|
|
/* Default minimal background */
|
|
--glass-bg-medium: rgba(255, 255, 255, 0.03);
|
|
/* Medium minimal effect */
|
|
--glass-bg-hover: rgba(255, 255, 255, 0.04);
|
|
/* Hover state */
|
|
--glass-bg-active: rgba(255, 255, 255, 0.05);
|
|
/* Active/pressed state */
|
|
|
|
/* Glass Borders - Very thin and subtle */
|
|
--glass-border-subtle: rgba(255, 255, 255, 0.03);
|
|
/* Very subtle border */
|
|
--glass-border-default: rgba(255, 255, 255, 0.05);
|
|
/* Default border */
|
|
--glass-border-hover: rgba(255, 255, 255, 0.07);
|
|
/* Hover border */
|
|
--glass-border-focus: rgba(255, 255, 255, 0.10);
|
|
/* Focus state - more visible */
|
|
|
|
/* Backdrop Blur Levels - Subtle to strong */
|
|
--glass-blur-sm: 4px;
|
|
/* Small blur - for inputs */
|
|
--glass-blur-md: 8px;
|
|
/* Medium blur - default */
|
|
--glass-blur-lg: 12px;
|
|
/* Large blur - for navigation */
|
|
--glass-blur-xl: 16px;
|
|
/* Extra large - for modals */
|
|
|
|
/* Glass Shadows - Dark mode optimized */
|
|
--glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
--glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
|
|
--glass-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
|
|
--glass-shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.1);
|
|
/* Inner highlight */
|
|
|
|
/* Interactive Glass States */
|
|
--interactive-glass-rest: rgba(255, 255, 255, 0.04);
|
|
--interactive-glass-hover: rgba(255, 255, 255, 0.08);
|
|
--interactive-glass-active: rgba(255, 255, 255, 0.12);
|
|
--interactive-glass-disabled: rgba(255, 255, 255, 0.02);
|
|
|
|
/* Legacy support - keeping old variables for backward compatibility */
|
|
--glass-bg: var(--glass-bg-default);
|
|
--glass-border: var(--glass-border-default);
|
|
--glass-blur: var(--glass-blur-md);
|
|
|
|
/* ============================================
|
|
EN: Removed - Extended Shadows (X.ai Minimalist)
|
|
VI: Đã xóa - Extended Shadows (X.ai Minimalist)
|
|
============================================ */
|
|
/* Removed brand shadows for minimalist approach */
|
|
/* Use --shadow or --shadow-lg instead */
|
|
|
|
/* ============================================
|
|
EN: Light Mode Colors (Secondary Theme)
|
|
VI: Màu sắc cho Light Mode (Theme phụ)
|
|
============================================ */
|
|
--bg-primary-light: #FFFFFF;
|
|
--bg-secondary-light: #FBFBFD;
|
|
/* Apple Gray */
|
|
--bg-tertiary-light: #F5F5F7;
|
|
--text-primary-light: #1D1D1F;
|
|
/* Apple Black */
|
|
--text-secondary-light: #86868B;
|
|
/* Apple Gray Text */
|
|
--border-primary-light: #D2D2D7;
|
|
|
|
/* ============================================
|
|
EN: Typography
|
|
VI: Kiểu chữ
|
|
============================================ */
|
|
|
|
/* Font Stack / Bộ font */
|
|
--font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
|
|
|
/* Display Font - For hero titles (48px+) */
|
|
--font-display: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
|
/* Heading Font - For section headings (24-36px) */
|
|
--font-heading: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
|
|
/* Type Scale - Clean minimal approach */
|
|
--text-6xl: 3.5rem;
|
|
/* 56px - Hero titles */
|
|
--text-5xl: 2.75rem;
|
|
/* 44px - Page titles */
|
|
--text-4xl: 2.25rem;
|
|
/* 36px - Section headers */
|
|
--text-3xl: 1.75rem;
|
|
/* 28px - 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.5;
|
|
--leading-relaxed: 1.625;
|
|
--leading-loose: 2;
|
|
|
|
/* Font Weights - X.ai Minimalist (Bolder Impact) */
|
|
--font-thin: 100;
|
|
--font-extralight: 200;
|
|
--font-light: 300;
|
|
/* Light text */
|
|
--font-normal: 400;
|
|
/* Body text */
|
|
--font-medium: 500;
|
|
/* Emphasized */
|
|
--font-semibold: 600;
|
|
/* Headings */
|
|
--font-bold: 700;
|
|
/* Bold - stronger impact */
|
|
--font-extrabold: 800;
|
|
/* Extra bold - hero text */
|
|
--font-black: 900;
|
|
/* Black - maximum impact for titles */
|
|
|
|
/* Letter Spacing - Clean Minimalist Look */
|
|
--tracking-tighter: -0.04em;
|
|
/* Very tight - for large display text */
|
|
--tracking-tight: -0.02em;
|
|
/* Tight - for headings */
|
|
--tracking-normal: 0;
|
|
/* Normal */
|
|
--tracking-wide: 0.02em;
|
|
/* Wide - for small caps */
|
|
--tracking-wider: 0.04em;
|
|
/* Wider - for 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: 800px;
|
|
/* Max width for chat messages */
|
|
--sidebar-width: 280px;
|
|
/* Conversation history sidebar */
|
|
|
|
/* Mobile Layout / Layout Mobile */
|
|
--mobile-header-height: 56px;
|
|
/* Standard mobile header height */
|
|
--mobile-bottom-nav-height: 64px;
|
|
/* iOS/Android bottom nav height */
|
|
--mobile-safe-area-top: env(safe-area-inset-top);
|
|
/* iOS notch safe area */
|
|
--mobile-safe-area-bottom: env(safe-area-inset-bottom);
|
|
/* iOS home indicator safe area */
|
|
|
|
/* Border Radius / Bo góc */
|
|
--radius-sm: 2px;
|
|
/* Small elements - sharp */
|
|
--radius-md: 4px;
|
|
/* Buttons, inputs - sharp */
|
|
--radius-lg: 8px;
|
|
/* Cards - minimal roundness */
|
|
--radius-xl: 12px;
|
|
/* Large cards */
|
|
--radius-2xl: 16px;
|
|
/* Modals */
|
|
--radius-full: 9999px;
|
|
/* Full round - Avatars, pills */
|
|
|
|
/* ============================================
|
|
EN: Shadows - X.ai Minimalist (Ultra Subtle)
|
|
VI: Đổ bóng - X.ai Minimalist (Cực kỳ tinh tế)
|
|
============================================ */
|
|
--shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
/* Default shadow - subtle */
|
|
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.6);
|
|
/* Large shadow - for modals only */
|
|
|
|
/* Legacy support - mapping to new shadows */
|
|
--shadow-sm: var(--shadow);
|
|
--shadow-md: var(--shadow);
|
|
--shadow-xl: var(--shadow-lg);
|
|
--shadow-glow: 0 0 8px rgba(255, 255, 255, 0.05);
|
|
/* Minimal 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 - X.ai Minimalist (Simplified) */
|
|
--ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
/* Smooth and natural - primary easing */
|
|
--ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
|
|
/* Snappy - for quick interactions */
|
|
|
|
/* Legacy support - mapping to new easing */
|
|
--ease-in: var(--ease-snap);
|
|
--ease-out: var(--ease-snap);
|
|
--ease-in-out: var(--ease-smooth);
|
|
--motion-ease-smooth: var(--ease-smooth);
|
|
--motion-ease-glide: var(--ease-snap);
|
|
|
|
/* Duration - X.ai Minimalist (Faster, Snappier) */
|
|
--duration-instant: 100ms;
|
|
/* Instant feedback */
|
|
--duration-fast: 150ms;
|
|
/* Hover effects */
|
|
--duration-normal: 200ms;
|
|
/* Default transitions - FASTER */
|
|
--duration-slow: 300ms;
|
|
/* Complex animations - FASTER */
|
|
|
|
/* Legacy support - mapping to new durations */
|
|
--duration-slower: var(--duration-slow);
|
|
--motion-duration-instant: var(--duration-instant);
|
|
--motion-duration-quick: var(--duration-fast);
|
|
--motion-duration-normal: var(--duration-normal);
|
|
--motion-duration-smooth: var(--duration-slow);
|
|
|
|
/* ============================================
|
|
EN: Interactive States - X.ai Minimalist
|
|
VI: Trạng thái tương tác - X.ai Minimalist
|
|
============================================ */
|
|
|
|
/* Removed bounce/elastic - too playful for minimalism */
|
|
|
|
/* Hover Scale - Minimal movement */
|
|
--hover-scale-sm: 1.01;
|
|
/* Barely noticeable */
|
|
--hover-scale-md: 1.02;
|
|
/* Subtle */
|
|
|
|
/* Active Scale - For pressed states */
|
|
--active-scale: 0.99;
|
|
/* Minimal press feedback */
|
|
}
|
|
|
|
/* ============================================
|
|
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: #000000;
|
|
--bg-secondary: #0A0A0A;
|
|
--bg-tertiary: #141414;
|
|
--bg-elevated: #1A1A1A;
|
|
--text-primary: #FFFFFF;
|
|
--text-secondary: #B0B0B0;
|
|
--text-tertiary: #808080;
|
|
--text-muted: #505050;
|
|
--border-primary: #222222;
|
|
--border-secondary: #333333;
|
|
}
|
|
|
|
/* ============================================
|
|
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);
|
|
} |