| |
| module.exports = { |
| darkMode: 'class', |
| content: ['./src/**/*.{ts,tsx}'], |
| theme: { |
| extend: { |
| colors: { |
| canvas: { dark: '#0b0e11', light: '#ffffff' }, |
| surface: { card: '#1e2329', elevated: '#2b3139', soft: '#fafafa', strong: '#f5f5f5', hover: '#252c35' }, |
| brand: { yellow: '#FCD535', 'yellow-active': '#f0b90b', 'yellow-disabled': '#3a3a1f', turquoise: '#2dbdb6' }, |
| hairline: { light: '#eaecef', dark: '#2b3139' }, |
| ink: '#181a20', |
| muted: { DEFAULT: '#707a8a', strong: '#929aa5' }, |
| trading: { up: '#0ecb81', down: '#f6465d' }, |
| info: '#3b82f6', |
| }, |
| fontFamily: { |
| sans: ['var(--font-inter)', 'system-ui', 'sans-serif'], |
| mono: ['var(--font-ibm-plex-mono)', 'Consolas', 'monospace'], |
| }, |
| borderRadius: { xs: '2px', sm: '4px', md: '6px', lg: '8px', xl: '12px', pill: '9999px' }, |
| spacing: { section: '80px' }, |
| fontSize: { |
| 'hero': ['64px', { lineHeight: '1.1', letterSpacing: '-1px', fontWeight: '700' }], |
| 'display-lg': ['48px', { lineHeight: '1.1', letterSpacing: '-0.5px', fontWeight: '700' }], |
| 'display-md': ['40px', { lineHeight: '1.15', letterSpacing: '-0.3px', fontWeight: '600' }], |
| 'display-sm': ['32px', { lineHeight: '1.2', fontWeight: '600' }], |
| 'title-lg': ['24px', { lineHeight: '1.3', fontWeight: '600' }], |
| 'title-md': ['20px', { lineHeight: '1.35', fontWeight: '600' }], |
| 'title-sm': ['16px', { lineHeight: '1.4', fontWeight: '600' }], |
| 'num-display': ['40px', { lineHeight: '1.1', letterSpacing: '-0.3px', fontWeight: '700' }], |
| 'num-md': ['16px', { lineHeight: '1.4', fontWeight: '500' }], |
| 'num-sm': ['14px', { lineHeight: '1.4', fontWeight: '500' }], |
| 'body-md': ['14px', { lineHeight: '1.5', fontWeight: '400' }], |
| 'body-sm': ['13px', { lineHeight: '1.5', fontWeight: '400' }], |
| 'caption': ['12px', { lineHeight: '1.4', fontWeight: '500' }], |
| 'button': ['14px', { lineHeight: '1', fontWeight: '600' }], |
| 'nav': ['14px', { lineHeight: '1.4', fontWeight: '500' }], |
| }, |
| keyframes: { |
| 'flash-green': { '0%,100%': { backgroundColor: 'transparent' }, '50%': { backgroundColor: 'rgba(14,203,129,0.15)' } }, |
| 'flash-red': { '0%,100%': { backgroundColor: 'transparent' }, '50%': { backgroundColor: 'rgba(246,70,93,0.15)' } }, |
| 'pulse-glow': { '0%,100%': { boxShadow: '0 0 0 0 rgba(252,213,53,0.4)' }, '50%': { boxShadow: '0 0 20px 4px rgba(252,213,53,0.15)' } }, |
| 'slide-up': { '0%': { transform: 'translateY(10px)', opacity: '0' }, '100%': { transform: 'translateY(0)', opacity: '1' } }, |
| 'slide-in-right': { '0%': { transform: 'translateX(20px)', opacity: '0' }, '100%': { transform: 'translateX(0)', opacity: '1' } }, |
| }, |
| animation: { |
| 'flash-green': 'flash-green 0.6s ease-in-out', |
| 'flash-red': 'flash-red 0.6s ease-in-out', |
| 'pulse-glow': 'pulse-glow 2s ease-in-out infinite', |
| 'slide-up': 'slide-up 0.5s ease-out', |
| 'slide-in-right': 'slide-in-right 0.4s ease-out', |
| }, |
| }, |
| }, |
| plugins: [], |
| } |
|
|