streamfi-frontend/tailwind.config.ts at dev · Themancalledpg/streamfi-frontend · 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
import type { Config } from "tailwindcss";
import tailwindcssAnimate from "tailwindcss-animate";

const config: Config = {
  darkMode: "class",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./data/**/*.{js,ts,jsx,tsx,mdx}", // Important: includes your data files
    "./lib/**/*.{js,ts,jsx,tsx,mdx}", // Important: includes your theme-classes.ts
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        // StreamFi theme colors
        sidebar: "hsl(var(--sidebar))",
        tertiary: "hsl(var(--tertiary))",
        wallet: "hsl(var(--wallet))",
        modal: "hsl(var(--modal))",
        dropdown: "hsl(var(--dropdown))",
        tag: "hsl(var(--tag))",
        "tag-hover": "hsl(var(--tag-hover))",
        highlight: "hsl(var(--highlight))",
        warning: "hsl(var(--warning))",
        error: "hsl(var(--error))",
        success: "hsl(var(--success))",
        overlay: "hsl(var(--overlay) / var(--overlay-opacity))",
        surface: "hsl(var(--surface))",
        "surface-hover": "hsl(var(--surface-hover))",
        // Additional utility colors
        "bg-surface": "hsl(var(--surface))",
        "bg-surface-hover": "hsl(var(--surface-hover))",
        "text-surface": "hsl(var(--surface))",
        "border-surface": "hsl(var(--surface))",
        // Your custom colors
        "background-2": "var(--background-2)",
        "background-3": "var(--background-3)",
        "background-4": "var(--background-4)",
        lightPrimary: "var(--lightPrimary)",
        purples: "var(--purples)",
        offWhite: "var(--offWhite)",
        "offWhite-2": "var(--offWhite-2)",
        grayish: "var(--grayish)",
        grayish2: "var(--grayish2)",
        // Chart colors
        chart: {
          "1": "hsl(var(--chart-1))",
          "2": "hsl(var(--chart-2))",
          "3": "hsl(var(--chart-3))",
          "4": "hsl(var(--chart-4))",
          "5": "hsl(var(--chart-5))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      fontFamily: {
        helvetica: ["Helvetica Custom", "Arial", "sans-serif"],
        "pp-neue": ["PP Neue Machina", "sans-serif"],
        inter: ["Inter", "sans-serif"],
      },
      spacing: {
        "8.5": "32px",
        "12.5": "50px",
        "23": "92px",
      },
      animation: {
        twinkle: "twinkle 5s linear infinite",
        "twinkle-slow": "twinkle 7s linear infinite",
        "twinkle-fast": "twinkle 3s linear infinite",
      },
      keyframes: {
        twinkle: {
          "0%, 100%": { opacity: "0.2" },
          "50%": { opacity: "0.8" },
        },
      },
    },
  },
  plugins: [tailwindcssAnimate],
};

export default config;