admin/pos-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Cập nhật giao diện xác thực với thiết kế tối giản X.ai, loại bỏ nền vũ trụ và hiệu ứng động, điều chỉnh màu sắc nút và trạng thái focus, đồng thời

Browse Source
This commit is contained in:
Ho Ngoc Hai
2026-01-05 09:51:33 +07:00
parent d0790723f3
commit 26fa062e6f
7 changed files with 393 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web-client/src/app/(auth)/forgot-password/page.tsx
View File

@@ -112,24 +112,19 @@ export default function ForgotPasswordPage() {
<main
role="main"
aria-label={t('auth.forgotPassword.title')}
className="min-h-screen flex items-center justify-center relative overflow-hidden bg-black py-12 px-4 sm:px-6 lg:px-8"
className="min-h-screen flex items-center justify-center relative overflow-hidden bg-bg-primary py-12 px-4 sm:px-6 lg:px-8"
>
{/* EN: Cosmic Background Elements */}
{/* VI: Các thành phần nền vũ trụ */}
<div className="absolute inset-0 z-0 pointer-events-none">
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50" />
<div
className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50"
style={{ animationDelay: '-2s' }}
/>
</div>
{/* EN: X.ai Minimal Design - No cosmic background */}
{/* VI: X.ai Minimal Design - Không có nền vũ trụ */}
<AuthControls />
<div className="w-full max-w-md space-y-8 relative z-10 glass-appear">
<div className="text-center space-y-4">
<div className="flex justify-center">
<div className="p-3 rounded-2xl bg-white/5 border border-white/10 shadow-glass-sm animate-float">
<div className="p-3 rounded-2xl bg-accent-primary/5 border border-accent-primary/10 shadow-glass-sm">
{/* EN: X.ai Minimal - Static icon (no floating) */}
{/* VI: X.ai Minimal - Icon tĩnh (không float) */}
<svg
width="40"
height="40"
@@ -276,7 +271,7 @@ export default function ForgotPasswordPage() {
<div className="text-center pt-4 border-t border-glass-subtle">
<Link
href="/login"
className="text-sm font-medium text-text-secondary hover:text-white transition-colors inline-flex items-center gap-2 group"
className="text-sm font-medium text-accent-primary hover:text-accent-primary-hover transition-colors inline-flex items-center gap-2 group"
>
<svg
className="h-4 w-4 transform group-hover:-translate-x-1 transition-transform"

17
apps/web-client/src/app/(auth)/login/page.tsx
View File

@@ -113,24 +113,19 @@ export default function LoginPage() {
<main
role="main"
aria-label={t('auth.login.pageLabel')}
className="min-h-screen flex items-center justify-center relative overflow-hidden bg-black py-12 px-4 sm:px-6 lg:px-8"
className="min-h-screen flex items-center justify-center relative overflow-hidden bg-bg-primary py-12 px-4 sm:px-6 lg:px-8"
>
{/* EN: Cosmic Background Elements - X.ai style */}
{/* VI: Các thành phần nền vũ trụ - phong cách X.ai */}
<div className="absolute inset-0 z-0 pointer-events-none">
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50" />
<div
className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50"
style={{ animationDelay: '-2s' }}
/>
</div>
{/* EN: X.ai Minimal Design - No cosmic background */}
{/* VI: X.ai Minimal Design - Không có nền vũ trụ */}
<AuthControls />
<div className="w-full max-w-md space-y-8 relative z-10 glass-appear">
<div className="text-center space-y-4">
<div className="flex justify-center">
<div className="p-3 rounded-2xl bg-white/5 border border-white/10 shadow-glass-sm animate-float">
<div className="p-3 rounded-2xl bg-accent-primary/5 border border-accent-primary/10 shadow-glass-sm">
{/* EN: X.ai Minimal - Static icon (no floating) */}
{/* VI: X.ai Minimal - Icon tĩnh (không float) */}
<svg
width="40"
height="40"

17
apps/web-client/src/app/(auth)/register/page.tsx
View File

@@ -227,24 +227,19 @@ export default function RegisterPage() {
<main
role="main"
aria-label={t('auth.register.createAccount')}
className="min-h-screen flex items-center justify-center relative overflow-hidden bg-black py-12 px-4 sm:px-6 lg:px-8"
className="min-h-screen flex items-center justify-center relative overflow-hidden bg-bg-primary py-12 px-4 sm:px-6 lg:px-8"
>
{/* EN: Cosmic Background Elements */}
{/* VI: Các thành phần nền vũ trụ */}
<div className="absolute inset-0 z-0 pointer-events-none">
<div className="absolute top-[-10%] right-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50" />
<div
className="absolute bottom-[-10%] left-[-10%] w-[40%] h-[40%] bg-accent-primary/5 blur-[120px] rounded-full animate-float opacity-50"
style={{ animationDelay: '-2s' }}
/>
</div>
{/* EN: X.ai Minimal Design - No cosmic background */}
{/* VI: X.ai Minimal Design - Không có nền vũ trụ */}
<AuthControls />
<div className="w-full max-w-md space-y-8 relative z-10 glass-appear">
<div className="text-center space-y-4">
<div className="flex justify-center">
<div className="p-3 rounded-2xl bg-white/5 border border-white/10 shadow-glass-sm animate-float">
<div className="p-3 rounded-2xl bg-accent-primary/5 border border-accent-primary/10 shadow-glass-sm">
{/* EN: X.ai Minimal - Static icon (no floating) */}
{/* VI: X.ai Minimal - Icon tĩnh (không float) */}
<svg
width="40"
height="40"

2
apps/web-client/src/app/layout.tsx
View File

@@ -77,8 +77,8 @@ export default function RootLayout({
// VI: Cấu trúc HTML gốc với ngôn ngữ động (sẽ được cập nhật bởi I18nProvider)
<html lang="en" className={inter.variable} suppressHydrationWarning>
<body>
<SkipToContent />
<I18nProvider>
<SkipToContent />
<QueryProvider>
<ThemeProvider>{children}</ThemeProvider>
</QueryProvider>

14
apps/web-client/src/features/shared/components/ui/button/button.tsx
View File

@@ -79,12 +79,14 @@ const buttonVariants = cva(
'shadow-glass-md hover:shadow-glass-lg',
'hover:bg-glass-hover',
],
// Brand (gradient button for main CTA)
// Brand (X.ai blue - solid color, no gradient)
brand: [
'bg-brand-gradient text-white',
'shadow-brand hover:shadow-brand-lg',
'hover:scale-[1.02]',
'focus-visible:ring-brand-primary focus-visible:shadow-colored',
'bg-accent-primary text-white',
'shadow-md hover:shadow-lg',
'hover:bg-accent-primary-hover',
'transition-colors duration-quick',
'focus-visible:ring-2 focus-visible:ring-accent-primary/30',
'focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary',
],
},
size: {
@@ -108,7 +110,7 @@ const buttonVariants = cva(
export interface ButtonProps
extends Omit<AriaButtonProps, 'className' | 'children'>,
VariantProps<typeof buttonVariants> {
VariantProps<typeof buttonVariants> {
/**
* Custom className to merge with variant styles
*/

6
apps/web-client/src/features/shared/components/ui/input/input.tsx
View File

@@ -200,10 +200,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
'text-base text-text-primary placeholder:text-text-tertiary',
'transition-all duration-quick ease-smooth',
// Focus state with glass effect
// Focus state with X.ai blue ring (X.ai Minimal Design)
'focus:outline-none focus:ring-2 focus:ring-offset-2',
'focus:ring-glass-focus focus:ring-offset-bg-primary',
'focus:bg-glass focus:border-glass-hover',
'focus:ring-accent-primary/30 focus:ring-offset-bg-primary',
'focus:bg-glass focus:border-accent-primary',
// Invalid state
'data-[invalid]:border-accent-error',

702
apps/web-client/src/styles/theme.css
View File

@@ -14,396 +14,400 @@
*/
: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) */
/* Background Colors - X.ai Minimal / Màu nền - X.ai Minimal */
--bg-primary: #15202b;
/* Warm dark gray - Main background (X.ai style) */
--bg-secondary: #1a2734;
/* Warm dark gray lighter - Card/Panel background */
--bg-tertiary: #1f2f3d;
/* Warm dark gray medium - Hover states */
--bg-elevated: #243442;
/* Warm dark gray elevated - 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 */
/* Text Colors (WCAG Compliant) - X.ai Minimal / Màu chữ (tuân thủ WCAG) - X.ai Minimal */
--text-primary: #FFFFFF;
/* Pure white - Primary text */
--text-secondary: #8899A6;
/* X.ai gray - Secondary text (labels, descriptions) */
--text-tertiary: #657786;
/* X.ai dark gray - Tertiary text (captions, footnotes) */
--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 */
/* Brand/Accent Colors - X.ai Blue / Màu thương hiệu/Accent - X.ai Blue */
--accent-primary: #1D9BF0;
/* X.ai blue - Primary actions, links, focus */
--accent-primary-hover: #1a8cd8;
/* X.ai blue darker - Hover states */
--accent-primary-light: #8ecdf7;
/* X.ai blue lighter - Light accents */
--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 */
/* 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 */
/* Border Colors - X.ai Minimal / Màu viền - X.ai Minimal */
--border-primary: #222222;
/* Subtle borders */
--border-secondary: #333333;
/* Hover borders */
--border-focus: #1D9BF0;
/* Focus state - X.ai blue */
/* ============================================
EN: Minimal Brand Colors (x.ai Inspired)
VI: Màu thương hiệu tối giản (x.ai Inspired)
/* ============================================
EN: X.ai Brand Colors (2026 Minimal)
VI: Màu thương hiệu X.ai (2026 Minimal)
============================================ */
/* Primary Brand Color - Clean white accent */
--brand-primary: #FFFFFF;
--brand-primary-light: #F8F8F8;
--brand-primary-dark: #E5E5E5;
--brand-primary-contrast: #000000;
/* Primary Brand Color - X.ai Blue */
--brand-primary: #1D9BF0;
/* X.ai blue - Main brand color */
--brand-primary-light: #8ecdf7;
/* X.ai blue light */
--brand-primary-dark: #1a8cd8;
/* X.ai blue dark */
--brand-primary-contrast: #FFFFFF;
/* White text on X.ai blue */
/* Secondary Brand Color - Subtle gray */
--brand-secondary: #888888;
--brand-secondary-light: #AAAAAA;
--brand-secondary-dark: #666666;
/* Secondary Brand Color - Warm dark gray */
--brand-secondary: #8899A6;
/* X.ai gray */
--brand-secondary-light: #AAAAAA;
--brand-secondary-dark: #657786;
/* X.ai dark gray */
/* Accent Color - Minimal gray accent */
--brand-accent: #CCCCCC;
--brand-accent-light: #DDDDDD;
--brand-accent-dark: #BBBBBB;
/* No gradients - X.ai Minimalism uses solid colors only */
/* 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 Backgrounds - X.ai Ultra Minimal (2-5% opacity) */
--glass-bg-subtle: rgba(255, 255, 255, 0.01);
/* Ultra subtle - For minimal effect */
--glass-bg-default: rgba(255, 255, 255, 0.04);
/* Default X.ai minimal background (4%) */
--glass-bg-medium: rgba(255, 255, 255, 0.05);
/* Medium minimal effect */
--glass-bg-hover: rgba(255, 255, 255, 0.06);
/* Hover state */
--glass-bg-active: rgba(255, 255, 255, 0.08);
/* 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 */
/* Glass Borders - X.ai Subtle */
--glass-border-subtle: rgba(255, 255, 255, 0.05);
/* Very subtle border */
--glass-border-default: rgba(255, 255, 255, 0.08);
/* Default X.ai border (8%) */
--glass-border-hover: rgba(255, 255, 255, 0.12);
/* Hover border */
--glass-border-focus: rgba(29, 155, 240, 0.5);
/* Focus state - X.ai blue (50%) */
/* 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 */
/* Backdrop Blur Levels - X.ai Minimal (Reduced) */
--glass-blur-sm: 4px;
/* Small blur - for inputs */
--glass-blur-md: 8px;
/* Medium blur - X.ai default (reduced from 16px) */
--glass-blur-lg: 12px;
/* Large blur - cards only */
--glass-blur-xl: 12px;
/* Max blur - X.ai keeps it subtle (reduced from 16px) */
/* 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 */
/* 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);
/* 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);
/* 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 */
/* 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;
--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;
/* 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;
/* 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;
/* 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 */
/* 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;
/* 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 */
/* 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 */
/* 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 */
/* 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 */
/* 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 */
/* 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 */
/* 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 */
--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 */
/* 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 */
--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 */
/* 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);
/* 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 */
/* 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);
/* 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 */
/* Removed bounce/elastic - too playful for minimalism */
/* Hover Scale - Minimal movement */
--hover-scale-sm: 1.01;
/* Barely noticeable */
--hover-scale-md: 1.02;
/* Subtle */
/* 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 */
/* Active Scale - For pressed states */
--active-scale: 0.99;
/* Minimal press feedback */
}
/* ============================================
@@ -411,14 +415,14 @@
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);
}
: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);
}
}
/* ============================================
@@ -427,16 +431,25 @@
============================================ */
[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;
/* X.ai Minimal Dark Theme */
--bg-primary: #15202b;
/* Warm dark gray */
--bg-secondary: #1a2734;
--bg-tertiary: #1f2f3d;
--bg-elevated: #243442;
--text-primary: #FFFFFF;
--text-secondary: #8899A6;
/* X.ai gray */
--text-tertiary: #657786;
/* X.ai dark gray */
--text-muted: #505050;
--border-primary: #222222;
--border-secondary: #333333;
--border-focus: #1D9BF0;
/* X.ai blue */
--accent-primary: #1D9BF0;
/* X.ai blue */
--accent-primary-hover: #1a8cd8;
}
/* ============================================
@@ -445,10 +458,19 @@
============================================ */
[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);
/* X.ai Minimal Light Theme */
--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);
--border-focus: #1D9BF0;
/* X.ai blue stays in light mode */
--accent-primary: #1D9BF0;
/* X.ai blue */
--accent-primary-hover: #1a8cd8;
/* Glass effects adapted for light */
--glass-bg-default: rgba(0, 0, 0, 0.04);
--glass-border-default: rgba(0, 0, 0, 0.1);
}