Frontend/tailwind.config.js at develop · ERP007/Frontend · 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
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#0E6E83',
        'brand-strong': '#0A5365',
        'brand-soft': '#ECF4F6',
        'brand-line': '#CFE3E8',
        primary: '#0E6E83',
        'primary-strong': '#0A5365',
        'primary-soft': '#ECF4F6',
        'primary-line': '#CFE3E8',
        navy: '#06303C',
        ink: '#13202A',
        'ink-2': '#33454F',
        muted: '#647781',
        faint: '#93A3AC',
        line: '#E6EBEE',
        'line-soft': '#F0F3F5',
        background: '#F5F7F8',
        surface: '#FFFFFF',
        success: '#15875B',
        'success-bg': '#E8F4EE',
        'success-dot': '#23A06B',
        warning: '#B26C1E',
        'warning-bg': '#FAF0E2',
        'warning-dot': '#D08A33',
        off: '#697982',
        'off-bg': '#EEF1F3',
        'off-dot': '#9AA8B0',
        danger: '#C5453F',
        'danger-bg': '#FBECEB',
        'modal-backdrop': 'rgba(9, 20, 26, 0.5)',
        warm: '#FCF6EA',
      },
      fontFamily: {
        sans: [
          'Pretendard Variable',
          'Pretendard',
          '-apple-system',
          'BlinkMacSystemFont',
          'system-ui',
          'Apple SD Gothic Neo',
          'Malgun Gothic',
          'sans-serif',
        ],
      },
      fontSize: {
        display: ['30px', { lineHeight: '1.2', letterSpacing: '0', fontWeight: '800' }],
        h1: ['27px', { lineHeight: '1.2', letterSpacing: '0', fontWeight: '800' }],
        'modal-title': ['18.5px', { lineHeight: '1.2', letterSpacing: '0', fontWeight: '800' }],
        section: ['15.5px', { lineHeight: '1.35', letterSpacing: '0', fontWeight: '700' }],
        body: ['15px', { lineHeight: '1.5', fontWeight: '500' }],
        label: ['13px', { lineHeight: '1.4', fontWeight: '600' }],
        meta: ['12.5px', { lineHeight: '1.4', fontWeight: '500' }],
        table: ['12.5px', { lineHeight: '1.4', fontWeight: '600' }],
        micro: ['11px', { lineHeight: '1.2', letterSpacing: '0', fontWeight: '700' }],
        badge: ['12px', { lineHeight: '1.2', letterSpacing: '0', fontWeight: '700' }],
        kpi: ['32px', { lineHeight: '1.05', letterSpacing: '0', fontWeight: '800' }],
      },
      borderRadius: {
        card: '12px',
        modal: '16px',
        control: '8px',
        'control-lg': '10px',
        nav: '9px',
        badge: '7px',
        pill: '999px',
      },
      borderWidth: {
        1.5: '1.5px',
      },
      spacing: {
        4.5: '1.125rem',
        5.5: '1.375rem',
        13: '3.25rem',
        sidebar: '248px',
        topbar: '64px',
      },
      maxWidth: {
        content: '1600px',
        'content-narrow': '1180px',
        'auth-card': '460px',
        'auth-card-lg': '500px',
        'modal-sm': '520px',
        'modal-md': '640px',
        'modal-lg': '740px',
      },
      maxHeight: {
        modal: 'calc(100dvh - 10rem)',
      },
      height: {
        modal: 'calc(100dvh - 10rem)',
      },
      boxShadow: {
        card: '0 1px 2px rgba(19, 32, 42, 0.03)',
        primary: '0 1px 2px rgba(10, 83, 101, 0.25)',
        selected: 'inset 3px 0 0 #0E6E83',
        modal: '0 24px 70px rgba(9, 20, 26, 0.35)',
        drawer: '-20px 0 60px rgba(9, 20, 26, 0.25)',
        popover: '0 12px 36px rgba(9, 20, 26, 0.16)',
        login: '0 4px 24px rgba(19, 32, 42, 0.05)',
      },
    },
  },
  plugins: [],
}