136 lines
3.3 KiB
JavaScript
136 lines
3.3 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Material Design 3 调色板
|
|
primary: {
|
|
DEFAULT: '#006494', // 主色
|
|
50: '#F0F9FF',
|
|
100: '#E0F2FE',
|
|
200: '#B9E6FE',
|
|
300: '#7CD4FD',
|
|
400: '#36BFFA',
|
|
500: '#0BA5EC',
|
|
600: '#0086C9',
|
|
700: '#006494',
|
|
800: '#00497D',
|
|
900: '#003356',
|
|
},
|
|
secondary: {
|
|
DEFAULT: '#625B71',
|
|
50: '#F6F5F7',
|
|
100: '#ECEAEF',
|
|
200: '#D9D6DF',
|
|
300: '#B3AEBF',
|
|
400: '#8C859E',
|
|
500: '#625B71',
|
|
600: '#4E495A',
|
|
700: '#3B3744',
|
|
800: '#27242D',
|
|
900: '#141217',
|
|
},
|
|
surface: {
|
|
DEFAULT: '#FFFFFF',
|
|
dark: '#121212',
|
|
},
|
|
error: {
|
|
DEFAULT: '#DC2626',
|
|
50: '#FEF2F2',
|
|
100: '#FEE2E2',
|
|
200: '#FECACA',
|
|
300: '#FCA5A5',
|
|
400: '#F87171',
|
|
500: '#EF4444',
|
|
600: '#DC2626',
|
|
700: '#B91C1C',
|
|
800: '#991B1B',
|
|
900: '#7F1D1D',
|
|
},
|
|
success: {
|
|
DEFAULT: '#16A34A',
|
|
50: '#F0FDF4',
|
|
100: '#DCFCE7',
|
|
200: '#BBF7D0',
|
|
300: '#86EFAC',
|
|
400: '#4ADE80',
|
|
500: '#22C55E',
|
|
600: '#16A34A',
|
|
700: '#15803D',
|
|
800: '#166534',
|
|
900: '#14532D',
|
|
},
|
|
warning: {
|
|
DEFAULT: '#FBBF24',
|
|
50: '#FFFBEB',
|
|
100: '#FEF3C7',
|
|
200: '#FDE68A',
|
|
300: '#FCD34D',
|
|
400: '#FBBF24',
|
|
500: '#F59E0B',
|
|
600: '#D97706',
|
|
700: '#B45309',
|
|
800: '#92400E',
|
|
900: '#78350F',
|
|
}
|
|
},
|
|
fontFamily: {
|
|
sans: ['Roboto', 'sans-serif'], // Google 字体
|
|
},
|
|
boxShadow: {
|
|
// Material Design 3 阴影
|
|
'elevation-1': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
'elevation-2': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
|
'elevation-3': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
|
'elevation-4': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
|
'elevation-5': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
|
},
|
|
borderRadius: {
|
|
// Material Design 3 圆角
|
|
'none': '0',
|
|
'sm': '4px',
|
|
DEFAULT: '8px',
|
|
'md': '12px',
|
|
'lg': '16px',
|
|
'xl': '28px',
|
|
'2xl': '32px',
|
|
'full': '9999px',
|
|
},
|
|
animation: {
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
'ripple': 'ripple 0.6s linear',
|
|
},
|
|
keyframes: {
|
|
pulse: {
|
|
'0%, 100%': {
|
|
opacity: 1,
|
|
transform: 'scale(1)',
|
|
},
|
|
'50%': {
|
|
opacity: .9,
|
|
transform: 'scale(0.98)',
|
|
},
|
|
},
|
|
ripple: {
|
|
'0%': {
|
|
transform: 'scale(0)',
|
|
opacity: 0.4,
|
|
},
|
|
'100%': {
|
|
transform: 'scale(4)',
|
|
opacity: 0,
|
|
},
|
|
}
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
corePlugins: {
|
|
preflight: false,
|
|
},
|
|
} |