66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import type { Config } from 'tailwindcss';
|
|
|
|
const config: Config = {
|
|
darkMode: 'class',
|
|
content: [
|
|
'./index.html',
|
|
'./src/**/*.{js,ts,jsx,tsx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Light Theme Colors ("Classic Heritage & Soft Sand")
|
|
yotripLight: {
|
|
bg: '#f6f0ed', // Parchment - Global Page Backgrounds
|
|
text: '#28536b', // Yale Blue - Primary Text & Main Titles
|
|
steel: '#7ea8be', // Steel Blue - Active Navigation & Secondary Actions
|
|
khaki: '#bbb193', // Khaki Beige - Borders, Dividers, Muted States
|
|
rosy: '#c2948a', // Rosy Taupe - Special Highlight Badges, Notifications
|
|
},
|
|
// Dark Theme Colors ("Vintage Velvet & Aquatic Zest")
|
|
yotripDark: {
|
|
bg: '#513b56', // Vintage Grape - Global Page Backgrounds
|
|
surface: '#525174', // Dusty Grape - Component Surfaces (Cards, Bubbles)
|
|
lime: '#bce784', // Lime Cream - Brand Text Highlights, Active Icons
|
|
bondi: '#348aa7', // Bondi Blue - Primary Action Buttons, Links
|
|
emerald: '#5dd39e', // Emerald - Success Utilities & "Tối ưu" badges
|
|
},
|
|
// CSS Variable based colors for smooth theme support
|
|
theme: {
|
|
bg: 'var(--background)',
|
|
'bg-alt': 'var(--background-alt)',
|
|
surface: 'var(--surface)',
|
|
'surface-muted': 'var(--surface-muted)',
|
|
'surface-hover': 'var(--surface-hover)',
|
|
border: 'var(--border)',
|
|
'border-light': 'var(--border-light)',
|
|
'text': 'var(--text-primary)',
|
|
'text-secondary': 'var(--text-secondary)',
|
|
'text-accent': 'var(--text-accent)',
|
|
'text-muted': 'var(--text-muted)',
|
|
'text-disabled': 'var(--text-disabled)',
|
|
primary: 'var(--primary)',
|
|
'primary-hover': 'var(--primary-hover)',
|
|
'primary-light': 'var(--primary-light)',
|
|
secondary: 'var(--secondary)',
|
|
'secondary-light': 'var(--secondary-light)',
|
|
success: 'var(--success)',
|
|
'success-light': 'var(--success-light)',
|
|
danger: 'var(--danger)',
|
|
'danger-light': 'var(--danger-light)',
|
|
warning: 'var(--warning)',
|
|
'warning-light': 'var(--warning-light)',
|
|
info: 'var(--info)',
|
|
'info-light': 'var(--info-light)',
|
|
}
|
|
},
|
|
boxShadow: {
|
|
'theme-sm': 'var(--shadow-sm)',
|
|
'theme-md': 'var(--shadow-md)',
|
|
}
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
|
|
export default config; |