TA_POLIJECARE_E31231389/frontend/tailwind.config.js

123 lines
2.9 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: ['class', "class"],
theme: {
extend: {
colors: {
primary: {
DEFAULT: 'hsl(var(--primary))',
dark: '#D8BFD8',
light: '#F0E6FF',
foreground: 'hsl(var(--primary-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
light: '#5C7CFA',
dark: '#364FC7',
foreground: 'hsl(var(--accent-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
light: '#6C757D',
dark: '#343A40',
foreground: 'hsl(var(--secondary-foreground))'
},
danger: {
DEFAULT: '#DC2626',
light: '#EF4444',
dark: '#B91C1C'
},
gray: {
'50': '#F5F7FA',
'100': '#E5E7EB',
'200': '#D1D5DB',
'300': '#9CA3AF',
'400': '#6B7280',
'500': '#4B5563',
'600': '#374151',
'700': '#1F2937',
'800': '#111827',
'900': '#030712'
},
purple: {
'50': '#F3E8FF',
'100': '#E9D5FF',
'200': '#D8B4FE'
},
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
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))'
}
},
fontFamily: {
sans: [
'Inter',
'system-ui',
'sans-serif'
]
},
spacing: {
'18': '4.5rem',
'80': '20rem',
'88': '22rem'
},
borderRadius: {
xl: '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
boxShadow: {
soft: '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
card: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'
},
animation: {
float: 'float 3s ease-in-out infinite',
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite'
},
keyframes: {
float: {
'0%, 100%': {
transform: 'translateY(0px)'
},
'50%': {
transform: 'translateY(-10px)'
}
}
}
}
},
plugins: [require("tailwindcss-animate")],
}