langfuse

1
/** @type {import('tailwindcss').Config} */
2
module.exports = {
3
  darkMode: ["class"],
4
  content: [
5
    "./pages/**/*.{ts,tsx,jsx,tsx}",
6
    "./components/**/*.{ts,tsx,jsx,tsx}",
7
    "./app/**/*.{ts,tsx,jsx,tsx}",
8
    "./src/**/*.{js,ts,jsx,tsx}",
9
    "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
10
  ],
11
  theme: {
12
    container: {
13
      center: true,
14
      padding: "2rem",
15
      screens: {
16
        "2xl": "1400px",
17
      },
18
    },
19
    extend: {
20
      colors: {
21
        tremor: {
22
          brand: {
23
            faint: "#eff6ff", // blue-50
24
            muted: "#bfdbfe", // blue-200
25
            subtle: "#60a5fa", // blue-400
26
            DEFAULT: "#3b82f6", // blue-500
27
            emphasis: "#1d4ed8", // blue-700
28
            inverted: "#ffffff", // white
29
          },
30
          background: {
31
            muted: "#f9fafb", // gray-50
32
            subtle: "#f3f4f6", // gray-100
33
            DEFAULT: "#ffffff", // white
34
            emphasis: "#374151", // gray-700
35
          },
36
          border: {
37
            DEFAULT: "#e5e7eb", // gray-200
38
          },
39
          ring: {
40
            DEFAULT: "#e5e7eb", // gray-200
41
          },
42
          content: {
43
            subtle: "#9ca3af", // gray-400
44
            DEFAULT: "#6b7280", // gray-500
45
            emphasis: "#374151", // gray-700
46
            strong: "#111827", // gray-900
47
            inverted: "#ffffff", // white
48
          },
49
        },
50
        // dark mode
51
        "dark-tremor": {
52
          brand: {
53
            faint: "#0B1229", // custom
54
            muted: "#172554", // blue-950
55
            subtle: "#1e40af", // blue-800
56
            DEFAULT: "#3b82f6", // blue-500
57
            emphasis: "#60a5fa", // blue-400
58
            inverted: "#030712", // gray-950
59
          },
60
          background: {
61
            muted: "#131A2B", // custom
62
            subtle: "#1f2937", // gray-800
63
            DEFAULT: "#111827", // gray-900
64
            emphasis: "#d1d5db", // gray-300
65
          },
66
          border: {
67
            DEFAULT: "#1f2937", // gray-800
68
          },
69
          ring: {
70
            DEFAULT: "#1f2937", // gray-800
71
          },
72
          content: {
73
            subtle: "#4b5563", // gray-600
74
            DEFAULT: "#6b7280", // gray-600
75
            emphasis: "#e5e7eb", // gray-200
76
            strong: "#f9fafb", // gray-50
77
            inverted: "#000000", // black
78
          },
79
        },
80
        border: "hsl(var(--border))",
81
        input: "hsl(var(--input))",
82
        ring: "hsl(var(--ring))",
83
        background: "hsl(var(--background))",
84
        foreground: "hsl(var(--foreground))",
85
        primary: {
86
          DEFAULT: "hsl(var(--primary))",
87
          foreground: "hsl(var(--primary-foreground))",
88
        },
89
        secondary: {
90
          DEFAULT: "hsl(var(--secondary))",
91
          foreground: "hsl(var(--secondary-foreground))",
92
        },
93
        destructive: {
94
          DEFAULT: "hsl(var(--destructive))",
95
          foreground: "hsl(var(--destructive-foreground))",
96
        },
97
        muted: {
98
          DEFAULT: "hsl(var(--muted))",
99
          foreground: "hsl(var(--muted-foreground))",
100
        },
101
        accent: {
102
          DEFAULT: "hsl(var(--accent))",
103
          foreground: "hsl(var(--accent-foreground))",
104
        },
105
        popover: {
106
          DEFAULT: "hsl(var(--popover))",
107
          foreground: "hsl(var(--popover-foreground))",
108
        },
109
        card: {
110
          DEFAULT: "hsl(var(--card))",
111
          foreground: "hsl(var(--card-foreground))",
112
        },
113
      },
114
      boxShadow: {
115
        // light
116
        "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
117
        "tremor-card":
118
          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
119
        "tremor-dropdown":
120
          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
121
        // dark
122
        "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
123
        "dark-tremor-card":
124
          "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
125
        "dark-tremor-dropdown":
126
          "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
127
      },
128
      borderRadius: {
129
        "tremor-small": "0.375rem",
130
        "tremor-default": "0.5rem",
131
        "tremor-full": "9999px",
132
        lg: "var(--radius)",
133
        md: "calc(var(--radius) - 2px)",
134
        sm: "calc(var(--radius) - 4px)",
135
      },
136
      fontSize: {
137
        "tremor-label": "0.75rem",
138
        "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
139
        "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
140
        "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
141
      },
142
      keyframes: {
143
        "accordion-down": {
144
          from: { height: 0 },
145
          to: { height: "var(--radix-accordion-content-height)" },
146
        },
147
        "accordion-up": {
148
          from: { height: "var(--radix-accordion-content-height)" },
149
          to: { height: 0 },
150
        },
151
      },
152
      animation: {
153
        "accordion-down": "accordion-down 0.2s ease-out",
154
        "accordion-up": "accordion-up 0.2s ease-out",
155
      },
156
    },
157
  },
158
  safelist: [
159
    {
160
      pattern:
161
        /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
162
      variants: ["hover", "ui-selected"],
163
    },
164
    {
165
      pattern:
166
        /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
167
      variants: ["hover", "ui-selected"],
168
    },
169
    {
170
      pattern:
171
        /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
172
      variants: ["hover", "ui-selected"],
173
    },
174
    {
175
      pattern:
176
        /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
177
    },
178
    {
179
      pattern:
180
        /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
181
    },
182
    {
183
      pattern:
184
        /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
185
    },
186
  ],
187
  plugins: [require("@tailwindcss/forms"), require("tailwindcss-animate")],
188
};
189