122 lines
3.2 KiB
TypeScript
122 lines
3.2 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const config: Config = {
|
|
darkMode: "class",
|
|
content: [
|
|
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
background: 'var(--color-background)',
|
|
foreground: 'var(--color-foreground)',
|
|
card: {
|
|
DEFAULT: 'var(--color-surface-elevated)',
|
|
foreground: 'var(--color-foreground)'
|
|
},
|
|
popover: {
|
|
DEFAULT: 'var(--color-surface-elevated)',
|
|
foreground: 'var(--color-foreground)'
|
|
},
|
|
primary: {
|
|
DEFAULT: 'var(--color-accent)',
|
|
foreground: 'var(--color-foreground)'
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'var(--color-border)',
|
|
foreground: 'var(--color-foreground)'
|
|
},
|
|
muted: {
|
|
DEFAULT: 'var(--color-muted)',
|
|
foreground: 'var(--color-foreground-muted)'
|
|
},
|
|
accent: {
|
|
DEFAULT: 'var(--color-accent)',
|
|
foreground: 'var(--color-foreground)'
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))'
|
|
},
|
|
border: 'var(--color-border)',
|
|
input: 'var(--color-border)',
|
|
ring: 'var(--color-accent)',
|
|
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))'
|
|
},
|
|
// Custom colors for your existing components
|
|
surface: 'var(--color-surface)',
|
|
'surface-elevated': 'var(--color-surface-elevated)',
|
|
'border-subtle': 'var(--color-border-subtle)',
|
|
'accent-glow': 'var(--color-accent-glow)',
|
|
'accent-dim': 'var(--color-accent-dim)',
|
|
subtle: 'var(--color-subtle)',
|
|
'foreground-muted': 'var(--color-foreground-muted)',
|
|
'foreground-subtle': 'var(--color-foreground-subtle)',
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'var(--font-sans)',
|
|
'system-ui',
|
|
'sans-serif'
|
|
],
|
|
mono: [
|
|
'var(--font-mono)',
|
|
'monospace'
|
|
],
|
|
display: [
|
|
'var(--font-display)',
|
|
'system-ui',
|
|
'sans-serif'
|
|
]
|
|
},
|
|
animation: {
|
|
'gradient-x': 'gradient-x 15s ease infinite',
|
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
float: 'float 6s ease-in-out infinite'
|
|
},
|
|
keyframes: {
|
|
'gradient-x': {
|
|
'0%, 100%': {
|
|
'background-position': '0% 50%'
|
|
},
|
|
'50%': {
|
|
'background-position': '100% 50%'
|
|
}
|
|
},
|
|
float: {
|
|
'0%, 100%': {
|
|
transform: 'translateY(0px)'
|
|
},
|
|
'50%': {
|
|
transform: 'translateY(-20px)'
|
|
}
|
|
}
|
|
},
|
|
backgroundImage: {
|
|
'grid-pattern': 'url("data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 32 32\' width=\'32\' height=\'32\' fill=\'none\' stroke=\'rgb(71 85 105 / 0.5)\'%3e%3cpath d=\'M0 .5H31.5V32\'/%3e%3c/svg%3e")'
|
|
},
|
|
boxShadow: {
|
|
glow: '0 0 30px var(--color-accent-glow)',
|
|
'glow-lg': '0 0 60px var(--color-accent-glow)',
|
|
card: '0 4px 24px rgb(0 0 0 / 0.4)',
|
|
'card-hover': '0 8px 48px rgb(0 0 0 / 0.6)'
|
|
},
|
|
borderRadius: {
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 2px)',
|
|
sm: 'calc(var(--radius) - 4px)'
|
|
}
|
|
}
|
|
},
|
|
plugins: [require("tailwindcss-animate")],
|
|
};
|
|
|
|
export default config;
|