gusring-web/tailwind.config.js at main · gusring/gusring-web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      // ── 폰트 ──────────────────────────────────────────────
      fontFamily: {
        sans: [
          'Pretendard Variable', 'Pretendard',
          '-apple-system', 'BlinkMacSystemFont', 'system-ui',
          'Apple SD Gothic Neo', 'Noto Sans KR',
          'sans-serif',
        ],
      },

      // ── 색상 토큰 ─────────────────────────────────────────
      colors: {
        gusring: {
          bg:        '#FAF8F5',
          surface:   '#FFFFFF',
          // 브랜드 메인 컬러 (로고 테라코타 오렌지)
          yellow:         '#D4522A',
          'yellow-press': '#B8411C',
          'yellow-soft':  '#FDF0EB',
          text:      '#111827',
          'text-sub': '#6B7280',
          'text-hint': '#9CA3AF',
          border:    '#F0F1F5',
          'border-strong': '#E5E7EB',
          // 브랜드 컬러 스케일
          brand: {
            50:  '#FDF4F0',
            100: '#FAE4DA',
            200: '#F4C5B0',
            300: '#ECA083',
            400: '#E07355',
            500: '#D4522A',
            600: '#B8411C',
            700: '#8E3214',
            800: '#6B240D',
            900: '#4D1A09',
            950: '#2E0E04',
          },
        },
      },

      // ── 그림자 ────────────────────────────────────────────
      boxShadow: {
        'card':    '0 2px 12px 0 rgba(0,0,0,0.06)',
        'card-md': '0 4px 20px 0 rgba(0,0,0,0.09)',
        'card-lg': '0 8px 32px 0 rgba(0,0,0,0.12)',
        'yellow':  '0 6px 24px 0 rgba(212,82,42,0.35)',
        'yellow-sm': '0 3px 12px 0 rgba(212,82,42,0.25)',
        'inset-sm': 'inset 0 1px 3px rgba(0,0,0,0.06)',
        'none': 'none',
      },

      // ── 둥근 모서리 ───────────────────────────────────────
      borderRadius: {
        '2.5xl': '1.25rem',   // 20px
        '3.5xl': '1.75rem',   // 28px
        '4xl':   '2rem',      // 32px
        '5xl':   '2.5rem',    // 40px
        '6xl':   '3rem',      // 48px
      },

      // ── 애니메이션 ────────────────────────────────────────
      keyframes: {
        slideUpFade: {
          '0%':   { opacity: '0', transform: 'translateY(16px)' },
          '100%': { opacity: '1', transform: 'translateY(0)'    },
        },
        slideInRight: {
          '0%':   { opacity: '0', transform: 'translateX(24px)' },
          '100%': { opacity: '1', transform: 'translateX(0)'    },
        },
        fadeIn: {
          '0%':   { opacity: '0' },
          '100%': { opacity: '1' },
        },
        bounceSoft: {
          '0%, 100%': { transform: 'translateY(-5px)' },
          '50%':      { transform: 'translateY(0)'    },
        },
        shimmer: {
          '0%':   { backgroundPosition: '-200% center' },
          '100%': { backgroundPosition:  '200% center' },
        },
        scaleIn: {
          '0%':   { opacity: '0', transform: 'scale(0.94)' },
          '100%': { opacity: '1', transform: 'scale(1)'    },
        },
      },
      animation: {
        'slide-up':    'slideUpFade 0.35s cubic-bezier(0.34,1.2,0.64,1) both',
        'slide-right': 'slideInRight 0.3s cubic-bezier(0.4,0,0.2,1) both',
        'fade-in':     'fadeIn 0.25s ease-out both',
        'bounce-soft': 'bounceSoft 2.4s ease-in-out infinite',
        'shimmer':     'shimmer 1.6s linear infinite',
        'scale-in':    'scaleIn 0.2s cubic-bezier(0.34,1.2,0.64,1) both',
      },

      // ── 트랜지션 이징 ─────────────────────────────────────
      transitionTimingFunction: {
        'toss':   'cubic-bezier(0.4, 0, 0.2, 1)',
        'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
        'out':    'cubic-bezier(0, 0, 0.2, 1)',
      },
    },
  },
  plugins: [],
};