cms/tailwind.config.ts

84 lines
2.5 KiB
TypeScript

import type { Config } from 'tailwindcss'
const config: Config = {
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: {
brand: {
50: '#f0f4ff',
100: '#e0e9ff',
200: '#c7d6fe',
300: '#a5b8fc',
400: '#8193f8',
500: '#6470f3',
600: '#4f52e7',
700: '#4240cc',
800: '#3636a4',
900: '#313282',
950: '#1e1d4c',
},
surface: {
DEFAULT: '#ffffff',
muted: '#f8fafc',
subtle: '#f1f5f9',
},
ink: {
DEFAULT: '#0f172a',
muted: '#475569',
subtle: '#94a3b8',
inverse: '#ffffff',
},
},
fontFamily: {
sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
display: ['var(--font-cal)', 'var(--font-inter)', 'system-ui', 'sans-serif'],
},
fontSize: {
'2xs': ['0.625rem', { lineHeight: '0.875rem' }],
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'hero-mesh':
'radial-gradient(at 40% 20%, hsla(248,89%,70%,0.18) 0px, transparent 50%), radial-gradient(at 80% 0%, hsla(225,100%,60%,0.12) 0px, transparent 50%), radial-gradient(at 0% 50%, hsla(355,100%,65%,0.08) 0px, transparent 50%)',
},
animation: {
'fade-up': 'fadeUp 0.6s ease-out both',
'fade-in': 'fadeIn 0.4s ease-out both',
'float': 'float 6s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4,0,0.6,1) infinite',
},
keyframes: {
fadeUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
float: {
'0%, 100%': { transform: 'translateY(0px)' },
'50%': { transform: 'translateY(-12px)' },
},
},
boxShadow: {
'glow': '0 0 40px -8px rgba(100, 112, 243, 0.4)',
'glow-sm': '0 0 20px -4px rgba(100, 112, 243, 0.25)',
'card': '0 1px 3px 0 rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.04)',
'card-hover': '0 10px 40px -8px rgba(0,0,0,0.12), 0 4px 16px -4px rgba(0,0,0,0.08)',
},
borderRadius: {
'4xl': '2rem',
},
},
},
plugins: [],
}
export default config