138 lines
4.3 KiB
JavaScript
138 lines
4.3 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
// 브랜드 통일: 앱(Midnight Glass) blue 토큰과 동일 값 — 레거시 amber 폐기
|
|
blue: '#3b82f6',
|
|
'blue-light': '#60a5fa',
|
|
'blue-dark': '#2563eb',
|
|
'blue-glow': 'rgba(59,130,246,0.5)',
|
|
'blue-dim': 'rgba(59,130,246,0.14)',
|
|
'blue-muted': 'rgba(59,130,246,0.08)',
|
|
},
|
|
surface: {
|
|
950: '#08090c',
|
|
900: '#0d0f14',
|
|
800: '#13161f',
|
|
700: '#1a1e2b',
|
|
600: '#222838',
|
|
500: '#2b3245',
|
|
400: '#363f57',
|
|
300: '#434d69',
|
|
200: '#535f7f',
|
|
100: '#68769c',
|
|
},
|
|
neutral: {
|
|
50: '#ffffff',
|
|
100: '#f4f4f5',
|
|
200: '#e4e4e7',
|
|
300: '#d4d4d8',
|
|
400: '#a1a1aa',
|
|
500: '#71717a',
|
|
600: '#52525b',
|
|
700: '#3f3f46',
|
|
800: '#27272a',
|
|
900: '#18181b',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'"Pretendard Variable"',
|
|
'Pretendard',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'system-ui',
|
|
'Roboto',
|
|
'"Helvetica Neue"',
|
|
'"Segoe UI"',
|
|
'"Apple SD Gothic Neo"',
|
|
'"Noto Sans KR"',
|
|
'"Malgun Gothic"',
|
|
'sans-serif',
|
|
],
|
|
display: [
|
|
'"Pretendard Variable"',
|
|
'Pretendard',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'system-ui',
|
|
'"Apple SD Gothic Neo"',
|
|
'"Noto Sans KR"',
|
|
'sans-serif',
|
|
],
|
|
mono: [
|
|
'"JetBrains Mono"',
|
|
'"Fira Code"',
|
|
'ui-monospace',
|
|
'SFMono-Regular',
|
|
'Menlo',
|
|
'Monaco',
|
|
'Consolas',
|
|
'monospace',
|
|
],
|
|
},
|
|
fontSize: {
|
|
// 한글 헤드라인: 행간 1.2+ (블록 글자의 숨 쉬는 공간), 자간 -0.01~-0.02em.
|
|
'hero': ['clamp(2.75rem, 5.5vw, 4.5rem)', { lineHeight: '1.22', letterSpacing: '-0.02em' }],
|
|
'display': ['clamp(2.25rem, 4vw, 3.5rem)', { lineHeight: '1.28', letterSpacing: '-0.015em' }],
|
|
'h2': ['clamp(1.75rem, 3vw, 2.5rem)', { lineHeight: '1.32', letterSpacing: '-0.012em' }],
|
|
'h3': ['1.375rem', { lineHeight: '1.4', letterSpacing: '-0.008em' }],
|
|
'micro': ['0.75rem', { lineHeight: '1.4', letterSpacing: '0.04em' }],
|
|
'nano': ['0.6875rem', { lineHeight: '1.4', letterSpacing: '0.05em' }],
|
|
},
|
|
spacing: {
|
|
'4.5': '1.125rem',
|
|
'13': '3.25rem',
|
|
'15': '3.75rem',
|
|
'18': '4.5rem',
|
|
'22': '5.5rem',
|
|
'26': '6.5rem',
|
|
'30': '7.5rem',
|
|
'34': '8.5rem',
|
|
},
|
|
borderRadius: {
|
|
'instrument': '4px',
|
|
'panel': '8px',
|
|
'card': '16px',
|
|
'2card': '20px',
|
|
'3card': '24px',
|
|
},
|
|
boxShadow: {
|
|
'inset-panel': 'inset 0 1px 3px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06)',
|
|
'chassis': '0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06)',
|
|
'glow-sm': '0 0 12px rgba(59,130,246,0.3)',
|
|
'glow-md': '0 0 24px rgba(59,130,246,0.25), 0 0 48px rgba(59,130,246,0.1)',
|
|
'glow-lg': '0 0 36px rgba(59,130,246,0.35), 0 0 72px rgba(59,130,246,0.15)',
|
|
'glass-card': '0 12px 32px -4px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08)',
|
|
},
|
|
animation: {
|
|
'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
|
|
'scan': 'scan 8s linear infinite',
|
|
'blink': 'blink 1.4s ease-in-out infinite',
|
|
'fade-in-up': 'fade-in-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
},
|
|
keyframes: {
|
|
'glow-pulse': {
|
|
'0%, 100%': { opacity: '0.4' },
|
|
'50%': { opacity: '1' },
|
|
},
|
|
'scan': {
|
|
'0%': { transform: 'translateY(-100%)' },
|
|
'100%': { transform: 'translateY(100%)' },
|
|
},
|
|
'blink': {
|
|
'0%, 100%': { opacity: '1' },
|
|
'50%': { opacity: '0.3' },
|
|
},
|
|
'fade-in-up': {
|
|
'0%': { opacity: '0', transform: 'translateY(16px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|