FE/src/shared/lib/utils.ts at 8efef544a5bbff762293c0713aa9b99c9f448603 · geulDa/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
import { type ClassValue, clsx } from 'clsx';
import { extendTailwindMerge } from 'tailwind-merge';

const twMerge = extendTailwindMerge({
  extend: {
    theme: {
      text: [
        '.text-display-lg',
        '.text-display-md',
        '.text-display-sm',
        '.text-headline-lg',
        '.text-headline-md',
        '.text-headline-sm',
        '.text-title-lg',
        '.text-title-md',
        '.text-title-sm',
        '.text-label-lg',
        '.text-label-md',
        '.text-label-sm',
        '.text-body-lg',
        '.text-body-md',
        '.text-body-sm',
        '.text-display-serif',
        '.text-headline-lg-serif',
        '.text-headline-md-serif',
        '.text-headline-sm-serif',
        '.text-label-serif',
      ],

      color: [
        'mint-50',
        'mint-100',
        'mint-200',
        'mint-300',
        'mint-400',
        'mint-500',
        'mint-600',
        'mint-700',
        'mint-800',
        'mint-900',
        'pink-50',
        'pink-100',
        'pink-200',
        'pink-300',
        'pink-400',
        'pink-500',
        'pink-600',
        'pink-700',
        'pink-800',
        'pink-900',
        'gray-50',
        'gray-100',
        'gray-200',
        'gray-300',
        'gray-400',
        'gray-500',
        'gray-600',
        'gray-700',
        'gray-800',
        'gray-900',
        'blue-400',
        'red-300',
        'red-400',
        'background',
        'foreground',
      ],
    },
  },
});

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs));
};