web/src/lib/utils.ts at 8f43538b84be4b0961947ec1b69d9e3ec607a019 · PoliNetworkOrg/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
import { type ClassValue, clsx } from "clsx"
import { extendTailwindMerge } from "tailwind-merge"

const twMerge = extendTailwindMerge({
  extend: {
    theme: {
      radius: ["images", "rectangles", "buttonsM", "buttonsL"], // custom rounded classes from figma
    },
    classGroups: {
      // custom typography classes from figma
      "font-size": [
        {
          typo: [
            "display-extralarge",
            "display-large",
            "display-medium",
            "display-small",
            "headline-large",
            "headline-medium",
            "headline-small",
            "body-large",
            "body-medium",
            "body-small",
            "label-extralarge",
            "label-large",
            "label-medium",
            "label-small",
            "title-large",
            "title-medium",
            "title-small",
          ],
        },
      ],
      // custom background colors from figma
      "bg-color": [
        {
          bg: [
            "background",
            "background-blur",
            "red",
            "green",
            "blue-primary",
            "blue-primary-blur",
            "blue-secondary",
            "blue-tertiary",
            "blue-tertiary-blur",
          ],
        },
      ],
      // custom text colors from figma
      "text-color": [{ text: ["text-primary", "text-secondary", "text-accent-darkbg", "text-accent-lightbg"] }],
    },
  },
})

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}