Files
TurboTrades/frontend/tailwind.config.js
2026-01-10 04:57:43 +00:00

104 lines
2.9 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
// Primary colors
primary: {
DEFAULT: "#f58700",
50: "#fef3e6",
100: "#fde7cc",
200: "#fbcf99",
300: "#f9b766",
400: "#f79f33",
500: "#f58700",
600: "#c46c00",
700: "#935100",
800: "#623600",
900: "#311b00",
dark: "#c46c00",
},
// Dark colors
dark: {
DEFAULT: "#0f1923",
50: "#e6e7e9",
100: "#cdd0d3",
200: "#9ba1a7",
300: "#69727b",
400: "#37434f",
500: "#0f1923",
600: "#0c141c",
700: "#090f15",
800: "#060a0e",
900: "#030507",
},
// Surface colors
surface: {
DEFAULT: "#151d28",
light: "#1a2332",
lighter: "#1f2a3c",
dark: "#0f1519",
},
// Text colors
"text-secondary": "#94a3b8",
// Accent colors
accent: {
blue: "#3b82f6",
green: "#10b981",
red: "#ef4444",
yellow: "#f59e0b",
purple: "#8b5cf6",
},
// Utility colors
success: "#10b981",
warning: "#f59e0b",
danger: "#ef4444",
"danger-hover": "#dc2626",
},
fontFamily: {
sans: ["Inter", "system-ui", "sans-serif"],
display: ["Montserrat", "sans-serif"],
},
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
"mesh-gradient":
"linear-gradient(135deg, #0f1923 0%, #151d28 50%, #1a2332 100%)",
},
boxShadow: {
glow: "0 0 20px rgba(245, 135, 0, 0.3)",
"glow-lg": "0 0 30px rgba(245, 135, 0, 0.4)",
"inner-glow": "inset 0 0 20px rgba(245, 135, 0, 0.1)",
},
animation: {
"pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
shimmer: "shimmer 2s linear infinite",
"slide-up": "slideUp 0.3s ease-out",
"slide-down": "slideDown 0.3s ease-out",
"fade-in": "fadeIn 0.3s ease-in",
},
keyframes: {
shimmer: {
"0%": { backgroundPosition: "-1000px 0" },
"100%": { backgroundPosition: "1000px 0" },
},
slideUp: {
"0%": { transform: "translateY(10px)", opacity: "0" },
"100%": { transform: "translateY(0)", opacity: "1" },
},
slideDown: {
"0%": { transform: "translateY(-10px)", opacity: "0" },
"100%": { transform: "translateY(0)", opacity: "1" },
},
fadeIn: {
"0%": { opacity: "0" },
"100%": { opacity: "1" },
},
},
},
},
plugins: [],
};