313 lines
12 KiB
JavaScript
313 lines
12 KiB
JavaScript
/**
|
|
* EN: Tailwind CSS 4 Configuration
|
|
* VI: Cấu hình Tailwind CSS 4
|
|
*
|
|
* Note: Tailwind CSS 4 uses CSS-first configuration with @theme directive in CSS files.
|
|
* This config file extends the theme with additional utility classes based on CSS variables.
|
|
* The main theme tokens are defined in src/styles/theme.css.
|
|
*
|
|
* Lưu ý: Tailwind CSS 4 sử dụng cấu hình CSS-first với @theme directive trong file CSS.
|
|
* File config này mở rộng theme với các utility classes bổ sung dựa trên CSS variables.
|
|
* Các theme tokens chính được định nghĩa trong src/styles/theme.css.
|
|
*/
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/stories/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
darkMode: ['class', '[data-theme="dark"]'],
|
|
theme: {
|
|
extend: {
|
|
// EN: Colors from CSS variables (theme.css)
|
|
// VI: Màu sắc từ CSS variables (theme.css)
|
|
colors: {
|
|
bg: {
|
|
primary: 'var(--bg-primary)',
|
|
secondary: 'var(--bg-secondary)',
|
|
tertiary: 'var(--bg-tertiary)',
|
|
elevated: 'var(--bg-elevated)',
|
|
},
|
|
text: {
|
|
primary: 'var(--text-primary)',
|
|
secondary: 'var(--text-secondary)',
|
|
tertiary: 'var(--text-tertiary)',
|
|
inverse: 'var(--text-inverse)',
|
|
},
|
|
accent: {
|
|
primary: 'var(--accent-primary)',
|
|
secondary: 'var(--accent-secondary)',
|
|
success: 'var(--accent-success)',
|
|
warning: 'var(--accent-warning)',
|
|
error: 'var(--accent-error)',
|
|
info: 'var(--accent-info)',
|
|
},
|
|
chat: {
|
|
'user-bubble': 'var(--chat-user-bubble)',
|
|
'ai-bubble': 'var(--chat-ai-bubble)',
|
|
'user-text': 'var(--chat-user-text)',
|
|
'ai-text': 'var(--chat-ai-text)',
|
|
timestamp: 'var(--chat-timestamp)',
|
|
divider: 'var(--chat-divider)',
|
|
},
|
|
border: {
|
|
primary: 'var(--border-primary)',
|
|
secondary: 'var(--border-secondary)',
|
|
focus: 'var(--border-focus)',
|
|
},
|
|
// EN: Brand colors for easy access / VI: Màu thương hiệu dễ sử dụng
|
|
brand: {
|
|
primary: {
|
|
DEFAULT: 'var(--brand-primary)',
|
|
light: 'var(--brand-primary-light)',
|
|
dark: 'var(--brand-primary-dark)',
|
|
contrast: 'var(--brand-primary-contrast)',
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'var(--brand-secondary)',
|
|
light: 'var(--brand-secondary-light)',
|
|
dark: 'var(--brand-secondary-dark)',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'var(--brand-accent)',
|
|
light: 'var(--brand-accent-light)',
|
|
dark: 'var(--brand-accent-dark)',
|
|
},
|
|
},
|
|
// EN: Glassmorphism utilities (subtle x.ai style)
|
|
// VI: Utilities glassmorphism (phong cách x.ai tinh tế)
|
|
glass: {
|
|
// Backgrounds
|
|
bg: 'var(--glass-bg-default)',
|
|
'bg-subtle': 'var(--glass-bg-subtle)',
|
|
'bg-default': 'var(--glass-bg-default)',
|
|
'bg-medium': 'var(--glass-bg-medium)',
|
|
'bg-hover': 'var(--glass-bg-hover)',
|
|
'bg-active': 'var(--glass-bg-active)',
|
|
// Borders
|
|
border: 'var(--glass-border-default)',
|
|
'border-subtle': 'var(--glass-border-subtle)',
|
|
'border-default': 'var(--glass-border-default)',
|
|
'border-hover': 'var(--glass-border-hover)',
|
|
'border-focus': 'var(--glass-border-focus)',
|
|
},
|
|
},
|
|
// EN: Glass background colors
|
|
// VI: Màu nền glass
|
|
backgroundColor: {
|
|
'glass-subtle': 'var(--glass-bg-subtle)',
|
|
'glass': 'var(--glass-bg-default)',
|
|
'glass-medium': 'var(--glass-bg-medium)',
|
|
'glass-hover': 'var(--glass-bg-hover)',
|
|
'glass-active': 'var(--glass-bg-active)',
|
|
},
|
|
// EN: Glass border colors
|
|
// VI: Màu viền glass
|
|
borderColor: {
|
|
'glass-subtle': 'var(--glass-border-subtle)',
|
|
'glass': 'var(--glass-border-default)',
|
|
'glass-hover': 'var(--glass-border-hover)',
|
|
'glass-focus': 'var(--glass-border-focus)',
|
|
},
|
|
// EN: Font families from CSS variables
|
|
// VI: Font families từ CSS variables
|
|
fontFamily: {
|
|
sans: ['var(--font-sans)', 'sans-serif'],
|
|
mono: ['var(--font-mono)', 'monospace'],
|
|
},
|
|
// EN: Font sizes from CSS variables (for utility classes)
|
|
// VI: Kích thước chữ từ CSS variables (cho utility classes)
|
|
fontSize: {
|
|
'6xl': ['var(--text-6xl)', { lineHeight: '1' }],
|
|
'5xl': ['var(--text-5xl)', { lineHeight: '1' }],
|
|
'4xl': ['var(--text-4xl)', { lineHeight: '1.1' }],
|
|
'3xl': ['var(--text-3xl)', { lineHeight: '1.2' }],
|
|
'2xl': ['var(--text-2xl)', { lineHeight: '1.3' }],
|
|
'xl': ['var(--text-xl)', { lineHeight: '1.4' }],
|
|
'lg': ['var(--text-lg)', { lineHeight: '1.5' }],
|
|
'base': ['var(--text-base)', { lineHeight: '1.5' }],
|
|
'sm': ['var(--text-sm)', { lineHeight: '1.5' }],
|
|
'xs': ['var(--text-xs)', { lineHeight: '1.5' }],
|
|
},
|
|
// EN: Font weights from CSS variables
|
|
// VI: Độ đậm chữ từ CSS variables
|
|
fontWeight: {
|
|
light: 'var(--font-light)',
|
|
normal: 'var(--font-normal)',
|
|
medium: 'var(--font-medium)',
|
|
semibold: 'var(--font-semibold)',
|
|
bold: 'var(--font-bold)',
|
|
},
|
|
// EN: Spacing from CSS variables (extends default Tailwind spacing)
|
|
// VI: Khoảng cách từ CSS variables (mở rộng spacing mặc định của Tailwind)
|
|
spacing: {
|
|
'sidebar': 'var(--sidebar-width)',
|
|
'chat-max': 'var(--chat-max-width)',
|
|
// EN: Additional spacing utilities using CSS variables
|
|
// VI: Các utility spacing bổ sung sử dụng CSS variables
|
|
'0': 'var(--space-0)',
|
|
'1': 'var(--space-1)',
|
|
'2': 'var(--space-2)',
|
|
'3': 'var(--space-3)',
|
|
'4': 'var(--space-4)',
|
|
'5': 'var(--space-5)',
|
|
'6': 'var(--space-6)',
|
|
'8': 'var(--space-8)',
|
|
'10': 'var(--space-10)',
|
|
'12': 'var(--space-12)',
|
|
'16': 'var(--space-16)',
|
|
'20': 'var(--space-20)',
|
|
},
|
|
// EN: Border radius from CSS variables
|
|
// VI: Bo góc từ CSS variables
|
|
borderRadius: {
|
|
sm: 'var(--radius-sm)',
|
|
md: 'var(--radius-md)',
|
|
lg: 'var(--radius-lg)',
|
|
xl: 'var(--radius-xl)',
|
|
'2xl': 'var(--radius-2xl)',
|
|
full: 'var(--radius-full)',
|
|
},
|
|
// EN: Box shadows from CSS variables
|
|
// VI: Đổ bóng từ CSS variables
|
|
// EN: Brand gradients / VI: Gradients thương hiệu
|
|
backgroundImage: {
|
|
'brand-gradient': 'var(--brand-gradient-primary)',
|
|
'brand-gradient-accent': 'var(--brand-gradient-accent)',
|
|
'brand-gradient-vertical': 'var(--brand-gradient-vertical)',
|
|
},
|
|
// EN: Extended shadows (including glass shadows)
|
|
// VI: Shadows mở rộng (bao gồm glass shadows)
|
|
boxShadow: {
|
|
sm: 'var(--shadow-sm)',
|
|
md: 'var(--shadow-md)',
|
|
lg: 'var(--shadow-lg)',
|
|
xl: 'var(--shadow-xl)',
|
|
glow: 'var(--shadow-glow)',
|
|
brand: 'var(--shadow-brand)',
|
|
'brand-lg': 'var(--shadow-brand-lg)',
|
|
colored: 'var(--shadow-colored)',
|
|
// Glass shadows
|
|
'glass-sm': 'var(--glass-shadow-sm)',
|
|
'glass': 'var(--glass-shadow-md)',
|
|
'glass-md': 'var(--glass-shadow-md)',
|
|
'glass-lg': 'var(--glass-shadow-lg)',
|
|
'glass-inset': 'var(--glass-shadow-inset)',
|
|
},
|
|
// EN: Glass backdrop blur levels / VI: Các mức backdrop blur cho glass
|
|
backdropBlur: {
|
|
'glass-sm': 'var(--glass-blur-sm)',
|
|
'glass': 'var(--glass-blur-md)',
|
|
'glass-md': 'var(--glass-blur-md)',
|
|
'glass-lg': 'var(--glass-blur-lg)',
|
|
'glass-xl': 'var(--glass-blur-xl)',
|
|
},
|
|
// EN: Animation timing functions (including motion easing)
|
|
// VI: Hàm thời gian animation (bao gồm motion easing)
|
|
transitionTimingFunction: {
|
|
'in': 'var(--ease-in)',
|
|
'out': 'var(--ease-out)',
|
|
'in-out': 'var(--ease-in-out)',
|
|
spring: 'var(--ease-spring)',
|
|
// Motion easing (x.ai inspired)
|
|
smooth: 'var(--motion-ease-smooth)',
|
|
glide: 'var(--motion-ease-glide)',
|
|
},
|
|
// EN: Animation durations (including motion durations)
|
|
// VI: Thời lượng animation (bao gồm motion durations)
|
|
transitionDuration: {
|
|
fast: 'var(--duration-fast)',
|
|
normal: 'var(--duration-normal)',
|
|
slow: 'var(--duration-slow)',
|
|
slower: 'var(--duration-slower)',
|
|
// Motion durations (x.ai style)
|
|
instant: 'var(--motion-duration-instant)',
|
|
quick: 'var(--motion-duration-quick)',
|
|
'motion-normal': 'var(--motion-duration-normal)',
|
|
'motion-smooth': 'var(--motion-duration-smooth)',
|
|
},
|
|
// EN: Max widths for containers
|
|
// VI: Chiều rộng tối đa cho containers
|
|
maxWidth: {
|
|
'container-sm': 'var(--container-sm)',
|
|
'container-md': 'var(--container-md)',
|
|
'container-lg': 'var(--container-lg)',
|
|
'container-xl': 'var(--container-xl)',
|
|
'container-2xl': 'var(--container-2xl)',
|
|
'chat-max': 'var(--chat-max-width)',
|
|
},
|
|
// EN: Safe area utilities for mobile
|
|
// VI: Utilities safe area cho mobile
|
|
padding: {
|
|
'safe-top': 'var(--mobile-safe-area-top)',
|
|
'safe-bottom': 'var(--mobile-safe-area-bottom)',
|
|
},
|
|
margin: {
|
|
'safe-top': 'var(--mobile-safe-area-top)',
|
|
'safe-bottom': 'var(--mobile-safe-area-bottom)',
|
|
},
|
|
// EN: Screen breakpoints (matching CSS variables)
|
|
// VI: Điểm ngắt màn hình (khớp với CSS variables)
|
|
screens: {
|
|
sm: '640px',
|
|
md: '768px',
|
|
lg: '1024px',
|
|
xl: '1280px',
|
|
'2xl': '1536px',
|
|
},
|
|
// EN: Line heights from CSS variables
|
|
// VI: Chiều cao dòng từ CSS variables
|
|
lineHeight: {
|
|
none: 'var(--leading-none)',
|
|
tight: 'var(--leading-tight)',
|
|
snug: 'var(--leading-snug)',
|
|
normal: 'var(--leading-normal)',
|
|
relaxed: 'var(--leading-relaxed)',
|
|
loose: 'var(--leading-loose)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
// Custom glass utilities for Tailwind CSS 4
|
|
function({ addUtilities }) {
|
|
const glassUtilities = {
|
|
'.glass-panel': {
|
|
background: 'var(--glass-bg-default)',
|
|
'backdrop-filter': 'blur(var(--glass-blur-md))',
|
|
'-webkit-backdrop-filter': 'blur(var(--glass-blur-md))',
|
|
border: '1px solid var(--glass-border-default)',
|
|
'box-shadow': 'var(--glass-shadow-md), var(--glass-shadow-inset)',
|
|
},
|
|
'.glass-panel:hover': {
|
|
background: 'var(--glass-bg-hover)',
|
|
'border-color': 'var(--glass-border-hover)',
|
|
transition: 'all var(--motion-duration-quick) var(--motion-ease-smooth)',
|
|
},
|
|
};
|
|
addUtilities(glassUtilities);
|
|
},
|
|
// Mobile safe area utilities
|
|
function({ addUtilities }) {
|
|
const mobileUtilities = {
|
|
'.safe-area-inset-top': {
|
|
'padding-top': 'var(--mobile-safe-area-top)',
|
|
},
|
|
'.safe-area-inset-bottom': {
|
|
'padding-bottom': 'var(--mobile-safe-area-bottom)',
|
|
},
|
|
'.pb-safe-bottom': {
|
|
'padding-bottom': 'calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom))',
|
|
},
|
|
'.mobile-layout': {
|
|
'min-height': '100vh',
|
|
'min-height': '100dvh', // Dynamic viewport height for mobile
|
|
},
|
|
};
|
|
addUtilities(mobileUtilities);
|
|
},
|
|
],
|
|
};
|