ToDoc-FE/tailwind.config.js at develop · SOLINONE-ToDoc/ToDoc-FE · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      keyframes: {
        'gentle-pulse': {
          '0%, 100%': { opacity: '0.2' },
          '50%': { opacity: '0.3' },
        },
        'scan-with-hold': {
          '0%': { transform: 'translateY(-20px)' },
          '45%, 55%': { transform: 'translateY(65px)' },
          '100%': { transform: 'translateY(-20px)' },
        },
        'shadow-flip': {
          '0%, 10%': { opacity: '0' },
          '15%, 40%': {
            transform: 'scaleY(1) translateY(-15px)',
            opacity: '1'
          },
          '45%, 55%': { opacity: '0' },
          '60%, 85%': {
            transform: 'scaleY(-1) translateY(44px)',
            opacity: '1'
          },
          '90%, 100%': { opacity: '0' }
        }
      },
      animation: {
        'gentle-pulse': 'gentle-pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'scan-with-hold': 'scan-with-hold 2s ease-in-out infinite',
        'shadow-flip': 'shadow-flip 2s ease-in-out infinite',
      },
      backgroundImage: {
        'brand-gradient': 'linear-gradient(45deg, #ff5546 1%, #9747ff 50%, #ff5546 100%)',
      },

      colors: {
        white: '#ffffff',
        black: '#000000',

        gray: {
          100: '#f6f6f6',
          200: '#e9e9e9',
          300: '#d9d9d9',
          400: '#8b8b8b',
          500: '#606060',
          600: '#404040',
        },

        red: {
          100: '#FFE8E5',
          200: '#FFD0CC',
          300: '#FFA199',
          400: '#FF5546',
        },

        surface: {
          base: '#ffffff',
          primary: '#000000',
          secondary: '#e9e9e9',
          tertiary: '#404040',
          disabled: '#8b8b8b',

          input: {
            default: '#ffffff',
            hover: '#e9e9e9',
          },
          overlay: 'rgba(0,0,0,0.7)'
        },

        content: {
          primary: '#000000',
          secondary: '#d9d9d9',
          muted: '#8b8b8b',

          navActive: '#000000',
          navInactive: '#8b8b8b',

          placeholder: '#d9d9d9',

          onPrimary: '#000000',
          onInverse: '#ffffff',
          onOverlay: '#FFFFFF',

          success: '#40a6eb',
          error: '#ff6666',
          warning: '#ff6666',
        },

        line: {
          default: '#d9d9d9',
          input: {
            default: '#d9d9d9',
            hover: '#000000',
            focused: '#000000',
          }
        },
      },

      fontWeight: {
        'regular': '400',
        'medium': '500',
        'semibold': '600',
        'bold': '700',
      },

      fontSize: {
        'hero-1': ['84px', { lineHeight: '100px' }],
        'hero-2': ['64px', { lineHeight: 'normal' }],
        'hero-3': ['32px', { lineHeight: 'normal' }],
        'title': ['24px', { lineHeight: 'normal' }],
        'heading-1': ['18px', { lineHeight: 'normal' }],
        'body-1': ['16px', { lineHeight: '22px' }],
        'body-2': ['14px', { lineHeight: 'normal' }],
        'caption': ['12px', { lineHeight: '16px' }],
      },
    },
  },
  plugins: [],
}