web3auth-examples/react-playground/tailwind.config.js at main · Web3Auth/web3auth-examples · 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
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "#1c64f2",
        secondary: "#FF7D54",
        success: "#0e9f6e",
        info: "#0694a2",
        warning: "#c27803",
        danger: "#f05252",
        // Modern dark theme
        dark: {
          bg: {
            primary: "#10101E",
            secondary: "#191927",
            tertiary: "#1E1E30",
          },
          border: {
            primary: "#2E2E45",
            secondary: "#3D3D5C",
            focus: "#6D5AE6",
          },
          text: {
            primary: "#FFFFFF",
            secondary: "#CDCDDF",
            tertiary: "#9999AF",
            accent: "#6D5AE6",
          },
          accent: {
            primary: "#6D5AE6", // Vibrant purple
            secondary: "#FF7D54", // Coral orange
            tertiary: "#4DBFFF", // Bright blue
            quaternary: "#41E88D", // Success green
            destructive: "#FF5F5F", // Danger red
            warning: "#FFD166", // Warning yellow
          },
          card: {
            primary: "rgba(30, 30, 48, 0.7)",
            secondary: "rgba(25, 25, 39, 0.8)",
            highlight: "rgba(109, 90, 230, 0.15)",
          },
          gradient: {
            primary: "linear-gradient(135deg, #6D5AE6 0%, #4DBFFF 100%)",
            secondary: "linear-gradient(135deg, #FF7D54 0%, #FFBD59 100%)",
            tertiary: "linear-gradient(135deg, #41E88D 0%, #00C4B8 100%)",
          }
        },
        // Keep these for backward compatibility
        purple_100: "#EDEBFE",
        purple_800: "#5521B5",
        github: {
          bg: "#0D1117",
          surface: "#161B22",
          hover: "#21262D",
          border: "#30363D",
          text: "#C9D1D9",
          textSecondary: "#8B949E",
          heading: "#F0F6FC",
          accent: "#58A6FF",
          success: "#3FB950",
          danger: "#F85149",
          warning: "#F8E3A1",
          highlight: "#F78166",
          button: "#238636",
          buttonHover: "#2EA043"
        }
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      boxShadow: {
        'soft': '0 5px 15px rgba(0, 0, 0, 0.1)',
        'glow': '0 0 15px rgba(109, 90, 230, 0.5)',
        'card': '0 10px 30px -10px rgba(0, 0, 0, 0.3)',
      },
      animation: {
        'gradient': 'gradient 8s ease infinite',
        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'float': 'float 6s ease-in-out infinite',
      },
      keyframes: {
        gradient: {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' },
        },
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-10px)' },
        },
      },
      backdropBlur: {
        'xs': '2px',
      },
      borderRadius: {
        DEFAULT: '8px',
        'xl': '1rem',
        '2xl': '1.5rem',
        '3xl': '2rem',
      },
    },
  },
  plugins: [require("@tailwindcss/forms")],
};