87 lines
2.7 KiB
JavaScript
87 lines
2.7 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Windows Metro 深色主题配色
|
|
metro: {
|
|
dark: '#1a1a1a', // 最深背景
|
|
bg: '#252525', // 主背景
|
|
surface: '#2d2d2d', // 表面
|
|
card: '#323232', // 卡片
|
|
hover: '#3a3a3a', // 悬停
|
|
border: '#404040', // 边框
|
|
divider: '#333333', // 分割线
|
|
},
|
|
// Metro 强调色 - Windows 11 风格
|
|
accent: {
|
|
blue: '#0078d4', // 主强调色
|
|
'blue-hover': '#1a86d9',
|
|
'blue-light': '#60cdff',
|
|
green: '#0f7b0f', // 成功
|
|
'green-hover': '#1c9a1c',
|
|
red: '#c42b1c', // 错误/删除
|
|
'red-hover': '#d13d2d',
|
|
orange: '#f7630c', // 警告
|
|
purple: '#886ce4', // 紫色
|
|
teal: '#00b294', // 青色
|
|
yellow: '#ffd800', // 黄色
|
|
},
|
|
// 文字颜色
|
|
text: {
|
|
primary: '#ffffff',
|
|
secondary: 'rgba(255, 255, 255, 0.7)',
|
|
tertiary: 'rgba(255, 255, 255, 0.5)',
|
|
disabled: 'rgba(255, 255, 255, 0.3)',
|
|
}
|
|
},
|
|
fontFamily: {
|
|
sans: ['Segoe UI', 'system-ui', 'sans-serif'],
|
|
mono: ['Cascadia Code', 'Consolas', 'monospace'],
|
|
},
|
|
boxShadow: {
|
|
'metro': '0 2px 4px rgba(0, 0, 0, 0.2)',
|
|
'metro-lg': '0 4px 12px rgba(0, 0, 0, 0.3)',
|
|
'metro-xl': '0 8px 24px rgba(0, 0, 0, 0.4)',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.2s ease',
|
|
'slide-up': 'slideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'slide-down': 'slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'scale-in': 'scaleIn 0.2s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'pulse-soft': 'pulseSoft 2s ease-in-out infinite',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(8px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
slideDown: {
|
|
'0%': { opacity: '0', transform: 'translateY(-8px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
scaleIn: {
|
|
'0%': { opacity: '0', transform: 'scale(0.95)' },
|
|
'100%': { opacity: '1', transform: 'scale(1)' },
|
|
},
|
|
pulseSoft: {
|
|
'0%, 100%': { opacity: '1' },
|
|
'50%': { opacity: '0.7' },
|
|
},
|
|
},
|
|
transitionTimingFunction: {
|
|
'metro': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|