FEESH_FRONT/tailwind.config.js at develop · VOID-GSM/FEESH_FRONT · 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
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

  theme: {
    extend: {
      colors: {
        primary: "#00288e",
        "primary-container": "#1e40af",
        "on-primary": "#ffffff",

        background: "#f8f9ff",
        surface: "#f8f9ff",
        "surface-bright": "#f8f9ff",
        "surface-container-lowest": "#ffffff",
        "surface-container-low": "#eff4ff",
        "surface-container": "#e6eeff",
        "surface-container-high": "#dee9fc",
        "surface-container-highest": "#d9e3f6",

        "on-surface": "#121c2a",
        "on-surface-variant": "#444653",

        outline: "#757684",
        "outline-variant": "#c4c5d5",

        secondary: "#0060ac",
        "secondary-container": "#64a8fe",

        "surface-variant": "#d9e3f6",
      },

      spacing: {
        "stack-lg": "24px",
        "stack-md": "16px",
        "stack-sm": "8px",
        gutter: "12px",
        "margin-mobile": "16px",
        "margin-tablet": "24px",
        base: "4px",
      },

      borderRadius: {
        DEFAULT: "0.25rem",
        lg: "0.5rem",
        xl: "0.75rem",
        full: "9999px",
      },

      fontFamily: {
        sans: ["Plus Jakarta Sans", "sans-serif"],
      },

      fontSize: {
        "headline-xl": [
          "32px",
          {
            lineHeight: "40px",
            fontWeight: "700",
          },
        ],

        "headline-lg": [
          "24px",
          {
            lineHeight: "32px",
            fontWeight: "700",
          },
        ],

        "headline-md": [
          "20px",
          {
            lineHeight: "28px",
            fontWeight: "600",
          },
        ],

        "body-lg": [
          "16px",
          {
            lineHeight: "24px",
          },
        ],

        "label-lg": [
          "14px",
          {
            lineHeight: "20px",
            fontWeight: "600",
          },
        ],
      },
    },
  },

  plugins: [],
};