485 lines
17 KiB
JavaScript
485 lines
17 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
import typography from '@tailwindcss/typography';
|
|
|
|
export default {
|
|
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
|
darkMode: ['class', '[data-theme="dark"]'],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
|
display: ['Space Grotesk', 'Inter', 'system-ui', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'Monaco', 'Cascadia Code', 'Segoe UI Mono', 'Roboto Mono', 'monospace'],
|
|
},
|
|
colors: {
|
|
// Modern color system
|
|
background: 'rgb(var(--color-background) / <alpha-value>)',
|
|
foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
|
|
surface: 'rgb(var(--color-surface) / <alpha-value>)',
|
|
muted: 'rgb(var(--color-muted) / <alpha-value>)',
|
|
subtle: 'rgb(var(--color-subtle) / <alpha-value>)',
|
|
|
|
primary: {
|
|
DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
|
|
hover: 'rgb(var(--color-primary-hover) / <alpha-value>)',
|
|
subtle: 'rgb(var(--color-primary-subtle) / <alpha-value>)',
|
|
foreground: 'rgb(var(--color-primary-foreground) / <alpha-value>)',
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
300: '#93c5fd',
|
|
400: '#60a5fa',
|
|
500: '#3b82f6',
|
|
600: '#2563eb',
|
|
700: '#1d4ed8',
|
|
800: '#1e40af',
|
|
900: '#1e3a8a',
|
|
950: '#172554',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'rgb(var(--color-accent) / <alpha-value>)',
|
|
hover: 'rgb(var(--color-accent-hover) / <alpha-value>)',
|
|
subtle: 'rgb(var(--color-accent-subtle) / <alpha-value>)',
|
|
50: '#faf5ff',
|
|
100: '#f3e8ff',
|
|
200: '#e9d5ff',
|
|
300: '#d8b4fe',
|
|
400: '#c084fc',
|
|
500: '#a855f7',
|
|
600: '#9333ea',
|
|
700: '#7c3aed',
|
|
800: '#6b21a8',
|
|
900: '#581c87',
|
|
950: '#3b0764',
|
|
},
|
|
success: {
|
|
DEFAULT: 'rgb(var(--color-success) / <alpha-value>)',
|
|
subtle: 'rgb(var(--color-success-subtle) / <alpha-value>)',
|
|
50: '#f0fdf4',
|
|
100: '#dcfce7',
|
|
200: '#bbf7d0',
|
|
300: '#86efac',
|
|
400: '#4ade80',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
700: '#15803d',
|
|
800: '#166534',
|
|
900: '#14532d',
|
|
950: '#052e16',
|
|
},
|
|
warning: {
|
|
DEFAULT: 'rgb(var(--color-warning) / <alpha-value>)',
|
|
subtle: 'rgb(var(--color-warning-subtle) / <alpha-value>)',
|
|
50: '#fffbeb',
|
|
100: '#fef3c7',
|
|
200: '#fde68a',
|
|
300: '#fcd34d',
|
|
400: '#fbbf24',
|
|
500: '#f59e0b',
|
|
600: '#d97706',
|
|
700: '#b45309',
|
|
800: '#92400e',
|
|
900: '#78350f',
|
|
950: '#451a03',
|
|
},
|
|
error: {
|
|
DEFAULT: 'rgb(var(--color-error) / <alpha-value>)',
|
|
subtle: 'rgb(var(--color-error-subtle) / <alpha-value>)',
|
|
50: '#fef2f2',
|
|
100: '#fee2e2',
|
|
200: '#fecaca',
|
|
300: '#fca5a5',
|
|
400: '#f87171',
|
|
500: '#ef4444',
|
|
600: '#dc2626',
|
|
700: '#b91c1c',
|
|
800: '#991b1b',
|
|
900: '#7f1d1d',
|
|
950: '#450a0a',
|
|
},
|
|
border: 'rgb(var(--color-border) / <alpha-value>)',
|
|
'border-subtle': 'rgb(var(--color-border-subtle) / <alpha-value>)',
|
|
},
|
|
spacing: {
|
|
'18': '4.5rem',
|
|
'88': '22rem',
|
|
'128': '32rem',
|
|
'144': '36rem',
|
|
},
|
|
borderRadius: {
|
|
'4xl': '2rem',
|
|
'5xl': '2.5rem',
|
|
'6xl': '3rem',
|
|
},
|
|
boxShadow: {
|
|
'glass': '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
|
|
'glass-inset': 'inset 0 2px 4px 0 rgba(255, 255, 255, 0.06)',
|
|
'glow-sm': '0 0 20px -5px var(--tw-shadow-color)',
|
|
'glow': '0 0 40px -10px var(--tw-shadow-color)',
|
|
'glow-lg': '0 0 60px -15px var(--tw-shadow-color)',
|
|
'inner-border': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.1)',
|
|
},
|
|
backdropBlur: {
|
|
xs: '2px',
|
|
},
|
|
animation: {
|
|
// Enhanced animations
|
|
'fade-in': 'fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'fade-in-up': 'fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'fade-in-down': 'fadeInDown 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'slide-up': 'slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'slide-down': 'slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'slide-left': 'slideLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'slide-right': 'slideRight 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'scale-in': 'scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'scale-in-bounce': 'scaleInBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
|
|
'float': 'float 6s ease-in-out infinite',
|
|
'float-delayed': 'float 6s ease-in-out infinite 2s',
|
|
'pulse-subtle': 'pulseSubtle 4s ease-in-out infinite',
|
|
'glow': 'glow 2s ease-in-out infinite alternate',
|
|
'shimmer': 'shimmer 2s linear infinite',
|
|
'bounce-gentle': 'bounceGentle 3s ease-in-out infinite',
|
|
'gradient-x': 'gradientX 15s ease infinite',
|
|
'gradient-y': 'gradientY 15s ease infinite',
|
|
'gradient-xy': 'gradientXY 20s ease infinite',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
fadeInUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
fadeInDown: {
|
|
'0%': { opacity: '0', transform: 'translateY(-20px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
slideUp: {
|
|
'0%': { transform: 'translateY(30px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
slideDown: {
|
|
'0%': { transform: 'translateY(-30px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
slideLeft: {
|
|
'0%': { transform: 'translateX(30px)', opacity: '0' },
|
|
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
},
|
|
slideRight: {
|
|
'0%': { transform: 'translateX(-30px)', opacity: '0' },
|
|
'100%': { transform: 'translateX(0)', opacity: '1' },
|
|
},
|
|
scaleIn: {
|
|
'0%': { transform: 'scale(0.9)', opacity: '0' },
|
|
'100%': { transform: 'scale(1)', opacity: '1' },
|
|
},
|
|
scaleInBounce: {
|
|
'0%': { transform: 'scale(0.3)', opacity: '0' },
|
|
'50%': { transform: 'scale(1.05)', opacity: '0.8' },
|
|
'70%': { transform: 'scale(0.9)', opacity: '1' },
|
|
'100%': { transform: 'scale(1)', opacity: '1' },
|
|
},
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0px) rotate(0deg)' },
|
|
'33%': { transform: 'translateY(-10px) rotate(1deg)' },
|
|
'66%': { transform: 'translateY(-5px) rotate(-1deg)' },
|
|
},
|
|
pulseSubtle: {
|
|
'0%, 100%': { opacity: '1' },
|
|
'50%': { opacity: '0.8' },
|
|
},
|
|
glow: {
|
|
'0%': { boxShadow: '0 0 20px -5px currentColor' },
|
|
'100%': { boxShadow: '0 0 40px -5px currentColor' },
|
|
},
|
|
shimmer: {
|
|
'0%': { backgroundPosition: '-200% 0' },
|
|
'100%': { backgroundPosition: '200% 0' },
|
|
},
|
|
bounceGentle: {
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
'50%': { transform: 'translateY(-5px)' },
|
|
},
|
|
gradientX: {
|
|
'0%, 100%': { 'background-size': '200% 200%', 'background-position': 'left center' },
|
|
'50%': { 'background-size': '200% 200%', 'background-position': 'right center' },
|
|
},
|
|
gradientY: {
|
|
'0%, 100%': { 'background-size': '200% 200%', 'background-position': 'center top' },
|
|
'50%': { 'background-size': '200% 200%', 'background-position': 'center bottom' },
|
|
},
|
|
gradientXY: {
|
|
'0%, 100%': { 'background-size': '400% 400%', 'background-position': 'left center' },
|
|
'25%': { 'background-size': '400% 400%', 'background-position': 'center top' },
|
|
'50%': { 'background-size': '400% 400%', 'background-position': 'right center' },
|
|
'75%': { 'background-size': '400% 400%', 'background-position': 'center bottom' },
|
|
},
|
|
},
|
|
backgroundImage: {
|
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
|
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
|
'gradient-shimmer': 'linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)',
|
|
'noise': 'url("data:image/svg+xml,%3Csvg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.4"/%3E%3C/svg%3E")',
|
|
},
|
|
gradientColorStops: {
|
|
'glass-white': 'rgba(255, 255, 255, 0.1)',
|
|
'glass-black': 'rgba(0, 0, 0, 0.1)',
|
|
},
|
|
typography: ({ theme }) => ({
|
|
DEFAULT: {
|
|
css: {
|
|
'--tw-prose-body': theme('colors.foreground'),
|
|
'--tw-prose-headings': theme('colors.foreground'),
|
|
'--tw-prose-lead': theme('colors.muted'),
|
|
'--tw-prose-links': theme('colors.primary.DEFAULT'),
|
|
'--tw-prose-bold': theme('colors.foreground'),
|
|
'--tw-prose-counters': theme('colors.muted'),
|
|
'--tw-prose-bullets': theme('colors.subtle'),
|
|
'--tw-prose-hr': theme('colors.border'),
|
|
'--tw-prose-quotes': theme('colors.foreground'),
|
|
'--tw-prose-quote-borders': theme('colors.border'),
|
|
'--tw-prose-captions': theme('colors.muted'),
|
|
'--tw-prose-kbd': theme('colors.foreground'),
|
|
'--tw-prose-kbd-shadows': theme('colors.primary.DEFAULT'),
|
|
'--tw-prose-code': theme('colors.accent.DEFAULT'),
|
|
'--tw-prose-pre-code': theme('colors.foreground'),
|
|
'--tw-prose-pre-bg': theme('colors.surface'),
|
|
'--tw-prose-th-borders': theme('colors.border'),
|
|
'--tw-prose-td-borders': theme('colors.border-subtle'),
|
|
maxWidth: 'none',
|
|
fontSize: '1.125rem',
|
|
lineHeight: '1.75',
|
|
h1: {
|
|
fontFamily: theme('fontFamily.display').join(', '),
|
|
fontWeight: '700',
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
h2: {
|
|
fontFamily: theme('fontFamily.display').join(', '),
|
|
fontWeight: '600',
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
h3: {
|
|
fontFamily: theme('fontFamily.display').join(', '),
|
|
fontWeight: '600',
|
|
letterSpacing: '-0.025em',
|
|
},
|
|
h4: {
|
|
fontFamily: theme('fontFamily.display').join(', '),
|
|
fontWeight: '600',
|
|
},
|
|
code: {
|
|
backgroundColor: theme('colors.surface'),
|
|
padding: '0.25rem 0.5rem',
|
|
borderRadius: '0.375rem',
|
|
fontWeight: '500',
|
|
},
|
|
'code::before': {
|
|
content: '""',
|
|
},
|
|
'code::after': {
|
|
content: '""',
|
|
},
|
|
blockquote: {
|
|
borderLeftColor: theme('colors.primary.DEFAULT'),
|
|
backgroundColor: theme('colors.surface'),
|
|
padding: '1rem 1.5rem',
|
|
borderRadius: '0.5rem',
|
|
},
|
|
},
|
|
},
|
|
lg: {
|
|
css: {
|
|
fontSize: '1.25rem',
|
|
lineHeight: '1.8',
|
|
},
|
|
},
|
|
xl: {
|
|
css: {
|
|
fontSize: '1.375rem',
|
|
lineHeight: '1.8',
|
|
},
|
|
},
|
|
}),
|
|
screens: {
|
|
'xs': '475px',
|
|
'3xl': '1920px',
|
|
},
|
|
zIndex: {
|
|
'60': '60',
|
|
'70': '70',
|
|
'80': '80',
|
|
'90': '90',
|
|
'100': '100',
|
|
},
|
|
transitionDuration: {
|
|
'400': '400ms',
|
|
'600': '600ms',
|
|
'800': '800ms',
|
|
'900': '900ms',
|
|
},
|
|
transitionTimingFunction: {
|
|
'bounce-in': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
|
'bounce-out': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
|
|
'ease-in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
|
|
'ease-out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
|
|
},
|
|
scale: {
|
|
'102': '1.02',
|
|
'103': '1.03',
|
|
'115': '1.15',
|
|
'120': '1.2',
|
|
},
|
|
rotate: {
|
|
'1': '1deg',
|
|
'2': '2deg',
|
|
'3': '3deg',
|
|
},
|
|
blur: {
|
|
'4xl': '72px',
|
|
'5xl': '96px',
|
|
},
|
|
brightness: {
|
|
'25': '.25',
|
|
'175': '1.75',
|
|
},
|
|
saturate: {
|
|
'25': '.25',
|
|
'175': '1.75',
|
|
},
|
|
aspectRatio: {
|
|
'4/3': '4 / 3',
|
|
'3/2': '3 / 2',
|
|
'2/3': '2 / 3',
|
|
'9/16': '9 / 16',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
typography,
|
|
// Custom plugin for modern utilities
|
|
function({ addUtilities, addComponents, theme }) {
|
|
// Glass morphism utilities
|
|
addUtilities({
|
|
'.glass': {
|
|
background: 'rgba(255, 255, 255, 0.1)',
|
|
backdropFilter: 'blur(20px)',
|
|
borderRadius: '16px',
|
|
border: '1px solid rgba(255, 255, 255, 0.2)',
|
|
boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
|
|
},
|
|
'.glass-dark': {
|
|
background: 'rgba(0, 0, 0, 0.1)',
|
|
backdropFilter: 'blur(20px)',
|
|
borderRadius: '16px',
|
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.37)',
|
|
},
|
|
'.text-balance': {
|
|
textWrap: 'balance',
|
|
},
|
|
'.text-pretty': {
|
|
textWrap: 'pretty',
|
|
},
|
|
});
|
|
|
|
// Modern components
|
|
addComponents({
|
|
'.btn-glass': {
|
|
background: 'rgba(255, 255, 255, 0.1)',
|
|
backdropFilter: 'blur(20px)',
|
|
border: '1px solid rgba(255, 255, 255, 0.2)',
|
|
borderRadius: '12px',
|
|
padding: '12px 24px',
|
|
fontWeight: '500',
|
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'&:hover': {
|
|
background: 'rgba(255, 255, 255, 0.2)',
|
|
transform: 'translateY(-2px)',
|
|
boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
},
|
|
'&:active': {
|
|
transform: 'translateY(0)',
|
|
},
|
|
},
|
|
'.card-modern': {
|
|
background: theme('colors.surface'),
|
|
borderRadius: '20px',
|
|
padding: '24px',
|
|
border: `1px solid ${theme('colors.border')}`,
|
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
|
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'&:hover': {
|
|
transform: 'translateY(-4px)',
|
|
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
|
|
borderColor: theme('colors.primary.DEFAULT'),
|
|
},
|
|
},
|
|
'.input-modern': {
|
|
background: `${theme('colors.surface')}`,
|
|
border: `2px solid ${theme('colors.border')}`,
|
|
borderRadius: '12px',
|
|
padding: '12px 16px',
|
|
fontSize: '16px',
|
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'&:focus': {
|
|
outline: 'none',
|
|
borderColor: theme('colors.primary.DEFAULT'),
|
|
boxShadow: `0 0 0 4px ${theme('colors.primary.DEFAULT')}20`,
|
|
transform: 'translateY(-1px)',
|
|
},
|
|
'&::placeholder': {
|
|
color: theme('colors.subtle'),
|
|
},
|
|
},
|
|
'.gradient-text': {
|
|
background: `linear-gradient(135deg, ${theme('colors.primary.DEFAULT')}, ${theme('colors.accent.DEFAULT')})`,
|
|
backgroundClip: 'text',
|
|
color: 'transparent',
|
|
display: 'inline-block',
|
|
},
|
|
'.gradient-border': {
|
|
position: 'relative',
|
|
background: theme('colors.surface'),
|
|
borderRadius: '16px',
|
|
'&::before': {
|
|
content: '""',
|
|
position: 'absolute',
|
|
inset: '0',
|
|
padding: '2px',
|
|
background: `linear-gradient(135deg, ${theme('colors.primary.DEFAULT')}, ${theme('colors.accent.DEFAULT')})`,
|
|
borderRadius: 'inherit',
|
|
mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
|
|
maskComposite: 'xor',
|
|
},
|
|
},
|
|
'.section-modern': {
|
|
paddingTop: '80px',
|
|
paddingBottom: '80px',
|
|
'@screen lg': {
|
|
paddingTop: '120px',
|
|
paddingBottom: '120px',
|
|
},
|
|
},
|
|
'.container-modern': {
|
|
marginLeft: 'auto',
|
|
marginRight: 'auto',
|
|
maxWidth: '1200px',
|
|
paddingLeft: '24px',
|
|
paddingRight: '24px',
|
|
'@screen sm': {
|
|
paddingLeft: '32px',
|
|
paddingRight: '32px',
|
|
},
|
|
'@screen lg': {
|
|
paddingLeft: '48px',
|
|
paddingRight: '48px',
|
|
},
|
|
},
|
|
});
|
|
},
|
|
],
|
|
}; |