Edukit-FE/tailwind.config.ts at develop · Team-bbangbbangs/Edukit-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
126
127
128
129
130
131
132
133
134
135
136
137
138
import { type Config } from 'tailwindcss';
import tailwindcssAnimate from 'tailwindcss-animate';

const config: Config = {
  darkMode: ['class'],
  content: [
    './src/app/**/*.{js,ts,jsx,tsx}',
    './src/domains/**/*.{js,ts,jsx,tsx}',
    './src/shared/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      keyframes: {
        'collapsible-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-collapsible-content-height)' },
        },
        'collapsible-up': {
          from: { height: 'var(--radix-collapsible-content-height)' },
          to: { height: '0' },
        },
      },
      animation: {
        'collapsible-down': 'collapsible-down 0.2s ease-out',
        'collapsible-up': 'collapsible-up 0.2s ease-out',
      },
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: 'hsl(var(--primary))',
        'primary-foreground': 'hsl(var(--primary-foreground))',
        secondary: 'hsl(var(--secondary))',
        'secondary-foreground': 'hsl(var(--secondary-foreground))',
        muted: 'hsl(var(--muted))',
        'muted-foreground': 'hsl(var(--muted-foreground))',
        accent: 'hsl(var(--accent))',
        'accent-foreground': 'hsl(var(--accent-foreground))',
        destructive: 'hsl(var(--destructive))',
        'destructive-foreground': 'hsl(var(--destructive-foreground))',
        card: 'hsl(var(--card))',
        'card-foreground': 'hsl(var(--card-foreground))',
        popover: 'hsl(var(--popover))',
        'popover-foreground': 'hsl(var(--popover-foreground))',
        sidebar: {
          DEFAULT: 'hsl(var(--sidebar-background))',
          foreground: 'hsl(var(--sidebar-foreground))',
          primary: 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          accent: 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          border: 'hsl(var(--sidebar-border))',
          ring: 'hsl(var(--sidebar-ring))',
        },
        gray: {
          white: '#ffffff',
          1: '#f9fafb',
          2: '#dedede',
          3: '#C2C2C2',
          4: '#868686',
          5: '#464646',
          black: '#121212',
        },
        blue: {
          50: '#F0F4FE',
          100: '#DCE5FD',
          200: '#C2D3F8',
          300: '#98B7F8',
          400: '#5484f2',
          500: '#436BEE',
          600: '#2D4CE3',
          700: '#2539D0',
          800: '#2430A9',
          900: '#232E85',
          950: '#1A1E51',
        },
        brandSkyblue: '#D8EEFF',
        brandPink: '#FFDEEE',
        brandOrange: '#FDE3D2',
        brandGreen: '#D9F4D7',
        brandPurple: '#F0E4FC',
        brandDim: '#121212',
        brandRed: '#F25454',
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      fontFamily: {
        suit: ['var(--font-suit)', 'sans-serif'],
      },

      fontSize: {
        'heading-48': ['48px', { lineHeight: '72px', letterSpacing: '-0.02em', fontWeight: '700' }],
        'heading-40': ['40px', { lineHeight: '60px', letterSpacing: '-0.02em', fontWeight: '700' }],
        'heading-32': ['32px', { lineHeight: '48px', letterSpacing: '-0.02em', fontWeight: '700' }],
        'heading-28': ['28px', { lineHeight: '42px', letterSpacing: '-0.02em', fontWeight: '700' }],
        'heading-24': ['24px', { lineHeight: '36px', letterSpacing: '-0.02em', fontWeight: '700' }],
        'heading-20': ['20px', { lineHeight: '30px', letterSpacing: '-0.02em', fontWeight: '700' }],
        'heading-18': ['18px', { lineHeight: '28px', letterSpacing: '-0.02em', fontWeight: '700' }],
        'heading-16': [
          '16px',
          { lineHeight: '24px', letterSpacing: '-0.015em', fontWeight: '700' },
        ],

        'title-32': ['32px', { lineHeight: '48px', letterSpacing: '-0.02em', fontWeight: '600' }],
        'title-28': ['28px', { lineHeight: '42px', letterSpacing: '-0.02em', fontWeight: '600' }],
        'title-24': ['24px', { lineHeight: '36px', letterSpacing: '-0.02em', fontWeight: '600' }],
        'title-20': ['20px', { lineHeight: '30px', letterSpacing: '-0.02em', fontWeight: '600' }],
        'title-18': ['18px', { lineHeight: '28px', letterSpacing: '-0.02em', fontWeight: '600' }],
        'title-16': ['16px', { lineHeight: '24px', letterSpacing: '-0.015em', fontWeight: '600' }],
        'title-14': ['14px', { lineHeight: '20px', letterSpacing: '-0.015em', fontWeight: '600' }],

        'body-18-m': ['18px', { lineHeight: '30px', letterSpacing: '-0.015em', fontWeight: '500' }],
        'body-16-m': ['16px', { lineHeight: '26px', letterSpacing: '-0.015em', fontWeight: '500' }],
        'body-16-r': ['16px', { lineHeight: '26px', letterSpacing: '-0.015em', fontWeight: '400' }],
        'body-14-m': ['14px', { lineHeight: '22px', letterSpacing: '-0.015em', fontWeight: '500' }],
        'body-14-r': ['14px', { lineHeight: '22px', letterSpacing: '-0.015em', fontWeight: '400' }],
        'body-14-l': ['14px', { lineHeight: '22px', letterSpacing: '-0.015em', fontWeight: '300' }],
        'body-13-m': ['13px', { lineHeight: '20px', letterSpacing: '-0.015em', fontWeight: '500' }],
        'body-13-r': ['13px', { lineHeight: '20px', letterSpacing: '-0.015em', fontWeight: '400' }],
        'body-13-l': ['13px', { lineHeight: '20px', letterSpacing: '-0.015em', fontWeight: '300' }],

        'label-18': ['18px', { lineHeight: '24px', letterSpacing: '-0.02em', fontWeight: '600' }],
        'label-16': ['16px', { lineHeight: '22px', letterSpacing: '-0.02em', fontWeight: '600' }],
        'label-14': ['14px', { lineHeight: '18px', letterSpacing: '-0.02em', fontWeight: '600' }],
        'label-12': ['12px', { lineHeight: '16px', letterSpacing: '-0.02em', fontWeight: '600' }],
        'label-11': ['11px', { lineHeight: '14px', letterSpacing: '-0.02em', fontWeight: '600' }],
      },
    },
  },
  plugins: [tailwindcssAnimate],
};

export default config;