|
|
|
|
|
export default { |
|
|
content: [ |
|
|
"./index.html", |
|
|
"./src/**/*.{js,jsx,ts,tsx}", |
|
|
], |
|
|
theme: { |
|
|
extend: { |
|
|
|
|
|
colors: { |
|
|
|
|
|
primary: { |
|
|
50: '#FFF5F5', |
|
|
100: '#FFE4E4', |
|
|
200: '#FFCCCC', |
|
|
300: '#FFB3B3', |
|
|
400: '#FF9999', |
|
|
500: '#FF8080', |
|
|
600: '#FF6666', |
|
|
700: '#E65555', |
|
|
800: '#CC4444', |
|
|
900: '#910029', |
|
|
950: '#6B0021', |
|
|
}, |
|
|
|
|
|
|
|
|
secondary: { |
|
|
50: '#F8F9FA', |
|
|
100: '#E9ECEF', |
|
|
200: '#DEE2E6', |
|
|
300: '#CED4DA', |
|
|
400: '#ADB5BD', |
|
|
500: '#6C757D', |
|
|
600: '#495057', |
|
|
700: '#343A40', |
|
|
800: '#212529', |
|
|
900: '#39404B', |
|
|
950: '#1A1E22', |
|
|
}, |
|
|
|
|
|
|
|
|
accent: { |
|
|
50: '#F8FAFC', |
|
|
100: '#F1F5F9', |
|
|
200: '#E2E8F0', |
|
|
300: '#CBD5E1', |
|
|
400: '#94A3B8', |
|
|
500: '#64748B', |
|
|
600: '#475569', |
|
|
700: '#334155', |
|
|
800: '#1E293B', |
|
|
900: '#0F172A', |
|
|
950: '#020617', |
|
|
}, |
|
|
|
|
|
|
|
|
success: { |
|
|
50: '#F0FDF4', |
|
|
100: '#DCFCE7', |
|
|
200: '#BBF7D0', |
|
|
300: '#86EFAC', |
|
|
400: '#4ADE80', |
|
|
500: '#22C55E', |
|
|
600: '#16A34A', |
|
|
700: '#15803D', |
|
|
800: '#166534', |
|
|
900: '#14532D', |
|
|
950: '#062E15', |
|
|
}, |
|
|
|
|
|
warning: { |
|
|
50: '#FFFBEB', |
|
|
100: '#FEF3C7', |
|
|
200: '#FDE68A', |
|
|
300: '#FCD34D', |
|
|
400: '#FBBF24', |
|
|
500: '#F59E0B', |
|
|
600: '#D97706', |
|
|
700: '#B45309', |
|
|
800: '#92400E', |
|
|
900: '#78350F', |
|
|
950: '#451A03', |
|
|
}, |
|
|
|
|
|
error: { |
|
|
50: '#FEF2F2', |
|
|
100: '#FEE2E2', |
|
|
200: '#FECACA', |
|
|
300: '#FCA5A5', |
|
|
400: '#F87171', |
|
|
500: '#EF4444', |
|
|
600: '#DC2626', |
|
|
700: '#B91C1C', |
|
|
800: '#991B1B', |
|
|
900: '#7F1D1D', |
|
|
950: '#450A0A', |
|
|
}, |
|
|
|
|
|
info: { |
|
|
50: '#F0F9FF', |
|
|
100: '#E0F2FE', |
|
|
200: '#BAE6FD', |
|
|
300: '#7DD3FC', |
|
|
400: '#38BDF8', |
|
|
500: '#0EA5E9', |
|
|
600: '#0284C7', |
|
|
700: '#0369A1', |
|
|
800: '#075985', |
|
|
900: '#0C4A6E', |
|
|
950: '#082F49', |
|
|
}, |
|
|
|
|
|
|
|
|
neutral: { |
|
|
50: '#FAFAFA', |
|
|
100: '#F4F4F5', |
|
|
200: '#E4E4E7', |
|
|
300: '#D4D4D8', |
|
|
400: '#A1A1AA', |
|
|
500: '#71717A', |
|
|
600: '#52525B', |
|
|
700: '#3F3F46', |
|
|
800: '#27272A', |
|
|
900: '#18181B', |
|
|
950: '#09090B', |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
fontFamily: { |
|
|
sans: ['Roboto', 'system-ui', 'sans-serif'], |
|
|
display: ['Pacifico', 'cursive'], |
|
|
}, |
|
|
|
|
|
fontSize: { |
|
|
'xs': ['0.75rem', { lineHeight: '1rem' }], |
|
|
'sm': ['0.875rem', { lineHeight: '1.25rem' }], |
|
|
'base': ['1rem', { lineHeight: '1.5rem' }], |
|
|
'lg': ['1.125rem', { lineHeight: '1.75rem' }], |
|
|
'xl': ['1.25rem', { lineHeight: '1.75rem' }], |
|
|
'2xl': ['1.5rem', { lineHeight: '2rem' }], |
|
|
'3xl': ['1.875rem', { lineHeight: '2.25rem' }], |
|
|
'4xl': ['2.25rem', { lineHeight: '2.5rem' }], |
|
|
'5xl': ['3rem', { lineHeight: '1.2' }], |
|
|
'6xl': ['3.75rem', { lineHeight: '1.2' }], |
|
|
'7xl': ['4.5rem', { lineHeight: '1.2' }], |
|
|
'8xl': ['6rem', { lineHeight: '1.2' }], |
|
|
'9xl': ['8rem', { lineHeight: '1.2' }], |
|
|
}, |
|
|
|
|
|
fontWeight: { |
|
|
thin: 100, |
|
|
extralight: 200, |
|
|
light: 300, |
|
|
normal: 400, |
|
|
medium: 500, |
|
|
semibold: 600, |
|
|
bold: 700, |
|
|
extrabold: 800, |
|
|
black: 900, |
|
|
}, |
|
|
|
|
|
letterSpacing: { |
|
|
tighter: '-0.05em', |
|
|
tight: '-0.025em', |
|
|
normal: '0em', |
|
|
wide: '0.025em', |
|
|
wider: '0.05em', |
|
|
widest: '0.1em', |
|
|
}, |
|
|
|
|
|
|
|
|
spacing: { |
|
|
px: '1px', |
|
|
0.5: '0.125rem', |
|
|
1: '0.25rem', |
|
|
1.5: '0.375rem', |
|
|
2: '0.5rem', |
|
|
2.5: '0.625rem', |
|
|
3: '0.75rem', |
|
|
3.5: '0.875rem', |
|
|
4: '1rem', |
|
|
5: '1.25rem', |
|
|
6: '1.5rem', |
|
|
7: '1.75rem', |
|
|
8: '2rem', |
|
|
9: '2.25rem', |
|
|
10: '2.5rem', |
|
|
11: '2.75rem', |
|
|
12: '3rem', |
|
|
14: '3.5rem', |
|
|
16: '4rem', |
|
|
18: '4.5rem', |
|
|
20: '5rem', |
|
|
24: '6rem', |
|
|
28: '7rem', |
|
|
32: '8rem', |
|
|
36: '9rem', |
|
|
40: '10rem', |
|
|
44: '11rem', |
|
|
48: '12rem', |
|
|
52: '13rem', |
|
|
56: '14rem', |
|
|
60: '15rem', |
|
|
64: '16rem', |
|
|
72: '18rem', |
|
|
80: '20rem', |
|
|
96: '24rem', |
|
|
}, |
|
|
|
|
|
|
|
|
screens: { |
|
|
'xs': '475px', |
|
|
'sm': '640px', |
|
|
'md': '768px', |
|
|
'lg': '1024px', |
|
|
'xl': '1280px', |
|
|
'2xl': '1536px', |
|
|
'3xl': '1920px', |
|
|
}, |
|
|
|
|
|
|
|
|
borderRadius: { |
|
|
none: '0px', |
|
|
sm: '0.125rem', |
|
|
DEFAULT: '0.375rem', |
|
|
md: '0.5rem', |
|
|
lg: '0.75rem', |
|
|
xl: '1rem', |
|
|
'2xl': '1.5rem', |
|
|
'3xl': '2rem', |
|
|
full: '9999px', |
|
|
}, |
|
|
|
|
|
|
|
|
boxShadow: { |
|
|
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', |
|
|
DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', |
|
|
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', |
|
|
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', |
|
|
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', |
|
|
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', |
|
|
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', |
|
|
none: '0 0 0 0 rgba(0, 0, 0, 0)', |
|
|
}, |
|
|
|
|
|
|
|
|
animation: { |
|
|
'fade-in': 'fadeIn 0.5s ease-in-out', |
|
|
'slide-up': 'slideUp 0.5s ease-out', |
|
|
'slide-down': 'slideDown 0.5s ease-out', |
|
|
'slide-in-left': 'slideInLeft 0.3s ease-out', |
|
|
'slide-in-right': 'slideInRight 0.3s ease-out', |
|
|
'scale-in': 'scaleIn 0.2s ease-out', |
|
|
'bounce-subtle': 'bounceSubtle 0.6s ease-in-out', |
|
|
'pulse-slow': 'pulseSlow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
}, |
|
|
|
|
|
keyframes: { |
|
|
fadeIn: { |
|
|
'0%': { opacity: '0' }, |
|
|
'100%': { opacity: '1' }, |
|
|
}, |
|
|
slideUp: { |
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' }, |
|
|
'100%': { opacity: '1', transform: 'translateY(0)' }, |
|
|
}, |
|
|
slideDown: { |
|
|
'0%': { opacity: '0', transform: 'translateY(-20px)' }, |
|
|
'100%': { opacity: '1', transform: 'translateY(0)' }, |
|
|
}, |
|
|
slideInLeft: { |
|
|
'0%': { opacity: '0', transform: 'translateX(-100%)' }, |
|
|
'100%': { opacity: '1', transform: 'translateX(0)' }, |
|
|
}, |
|
|
slideInRight: { |
|
|
'0%': { opacity: '0', transform: 'translateX(100%)' }, |
|
|
'100%': { opacity: '1', transform: 'translateX(0)' }, |
|
|
}, |
|
|
scaleIn: { |
|
|
'0%': { opacity: '0', transform: 'scale(0.95)' }, |
|
|
'100%': { opacity: '1', transform: 'scale(1)' }, |
|
|
}, |
|
|
bounceSubtle: { |
|
|
'0%, 100%': { transform: 'translateY(0)' }, |
|
|
'50%': { transform: 'translateY(-10px)' }, |
|
|
}, |
|
|
pulseSlow: { |
|
|
'0%, 100%': { opacity: '1' }, |
|
|
'50%': { opacity: '0.8' }, |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
transitionDuration: { |
|
|
'75': '75ms', |
|
|
'100': '100ms', |
|
|
'200': '200ms', |
|
|
'300': '300ms', |
|
|
'500': '500ms', |
|
|
'700': '700ms', |
|
|
'1000': '1000ms', |
|
|
}, |
|
|
|
|
|
transitionTimingFunction: { |
|
|
'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)', |
|
|
'ease-out': 'cubic-bezier(0, 0, 0.2, 1)', |
|
|
'ease-in': 'cubic-bezier(0.4, 0, 1, 1)', |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
plugins: [], |
|
|
} |
|
|
|
